You need your site to look great, and typography is a key factor in design. Where can you find free fonts online in 2020 that uphold a high standard of quality?
I believe a user interface should only what’s necessary while making those necessary elements appealing. We want to strike the optimal balance between minimalism and visual appeal.
Keep it simple, but make the simple look great.
But, what does simple look like exactly?
Strip away the clutter, and most of what’s left is the UI copy and text content. It’s not exciting, but let’s be honest: this is the most important aspect of any app or website. Information is the entire reason users are using our app or website.
So with the right typeface coupled with the right font styles (see Font vs. typeface: the ultimate guide), we can create designs that are quite simple and appealing at the same time. This emphasizes the important aspects of the design, uses fewer resources, and induces the least unwanted cognitive load.
Typography can be very powerful.
But what are the best free font websites?
Where not to look for free fonts
Dribbble, Behance, Gumroad, and so on are home to a ton of hidden gems, but this involves sieving through many digital resources, some of which are incomplete side ventures and “lite” versions. That being said, make sure that you bookmark awesome resources if you do happen to come across any. Even Instagram might surprise you, and Twitter shouldn’t be overlooked either.
That aside, let’s take a look like the best free font websites.
1. Google Fonts
Number one on this list is obviously Google Fonts, which goes above and beyond what most alternatives offer. First of all, Google Fonts offers a fast and convenient CDN (content delivery network), making it super easy to embed web fonts into websites without actually hosting them.
Google fonts can be subsetted by script and weight, and we can also control how they’re loaded on the Web by setting the
font-display CSS property from the embed code’s query string, which improves website loading times. (The CSS-Tricks article on “Google Fonts and font-display” explains how.)
Mind you, self-hosting fonts are better for privacy (because it’s cookieless) and speed (because it offers developers more control). Either way, Google Fonts has a humungous repertoire.
I know what you’re thinking: “Creative Market isn’t free, Daniel!”
Ahhh, but what about the Free Goods section? What’s interesting about Free Goods is that these are actually premium fonts that are temporarily free. While it isn’t guaranteed to include fonts, it’s refreshed with six new design assets every week (plus three more when you sign up and another three if you spend X amount on assets).
I’ve been checking the Free Goods section on Creative Market every week for years, and I’ve built up a large repository of high-quality fonts that cost nothing. Font Bundles runs a similar deal.
Font Squirrel is like Unsplash but for fonts, although considering how long it’s been around (a really long time!), maybe saying that Unsplash is like Font Squirrel but for stock images is more accurate! One of the veteran free font websites alongside Dafont and Urban Fonts, although “squirrel” is better.
Although many of the veteran sites look a little outdated, Font Squirrel has kept its website somewhat modern compared to the rest. It also has a couple of very useful tools:
- Webfont Generator (converts TrueType/OpenType fonts into webfonts)
- Font Identifier (for finding out the name font from an uploaded image/screenshot)
FontSpace is one of the nicer-looking websites, although it only offers fonts free for personal use, whereas Font Squirrel confirms that all of their fonts are free for commercial use. FontSpace might not always be suitable.
5. By fonts
What sets Befonts apart is its focus on display fonts.
Although some of the fonts only offer lite/demo versions and often enough only come in TTF/OTF format (meaning they’re less suitable for the Web), Befonts is one of the very few websites that doesn’t take the “we have everything” approach (which can be overwhelming sometimes). Besides, you can always convert TTF and OTF fonts into web fonts.
6. Font Shop
Font Shop doesn’t focus completely on free typefaces like Font Squirrel and FontSpace, but it’s still a rather decent alternative if options one to four didn’t have what you were looking for. I find it to be the least user-friendly of the options, but the fonts are relatively high-quality.
The following free font websites look a little outdated, and truthfully some of the fonts do as well, but they’re arguably some of the largest databases of free fonts out there today:
Which font format do I need?
OpenType (OTF) and TrueType (TTF) font formats have been the standard for a really long time, and they’re still used heavily in graphic design today. But that being said, WOFF formats have better compression on the Web (especially WOFF2, which is now supported in 94.49% of web browsers according to caniuse.com). In fact, the new Google Fonts embed code only offers the WOFF2 format now.
So, in short:
- WOFF2 for web embeds
- TTF/OTF for everything else
Which font style do I need?
Nowadays, it doesn’t really matter because the norms have been thrown out the window a little bit. As an example, Serif fonts can have a modern feel now (think Medium).
Instead, we should focus more on clarity:
- Legibility (how easy it is to tell characters apart)
- Readability (how easy it is to read sentences as a whole)
Some of this comes down to the font itself, so one should be observant when deciding which fonts to use, but other times it comes down to how the font is the styling (in terms of size, weight, and so on).
When in doubt, the WCAG 2.0/2.1 (Web Content Accessibility Guidelines) have everything you need to know about typography and its many attributes, such as line spacing, line width, line height, font sizing, and so on.
Fonts are super useful, and they’re often all that’s needed to achieve the right amount of visual and emotional appeal without laying on more and more visual clutter. Your design needs text anyway, so why not make it the most outstanding aspect of it?
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
Learn PHP in One Day and Learn It Well