You need your website or application to look amazing, and typography is a key factor in design that can’t be overlooked. So where can you find free fonts online in 2020 that uphold a high standard of quality?
I firmly believe that, in order to strike the optimal balance between minimalism and visual appeal, a user interface should display no more than what’s absolutely necessary while making those necessary elements look visually appealing.
Keep it simple, but make the simple look amazing.
But, what does simple look like exactly?
Well, strip away all of the over-the-top marketing gimmicks, redundant features, and cluttering visuals, and most of what’s left is the UI copy and text content. As boring as this sounds, let’s be honest: this is the most important aspect of any app or website. Information and the ability to navigate it 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 yet visually appealing at the same time. This emphasizes the most important aspects of the design while using fewer resources and also inducing the least amount of 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 a lot of 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 as the best free font websites.
1. Google Fonts
Number one on this “best free fonts” 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 webfonts into websites without having to actually host 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 is 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 the section isn’t that huge, and isn’t guaranteed to include fonts specifically, each and every week it’s refreshed with six new design assets (plus three more if 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 literally 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! It’s one of the veteran free font websites alongside Dafont, 1001 Free Fonts, 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 a font from an uploaded image/screenshot)
FontSpace is one of the nicer-looking websites, although it only offers fonts that are free for personal use, whereas Font Squirrel confirms that all of their fonts are free for commercial use too. FontSpace might not always be suitable.
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 webfonts.
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 all that much 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 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?
Your First Year in Code
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers