Designers love typography. We love fonts and typefaces, and even know the difference between the two. We’re the ones that will take home old posters for events that have already past. We’re the ones quietly picking apart your wedding invitations instead of graciously accepting them. We’re the ones that are slow to order at restaurants because we’ve been analyzing the letters themselves instead of reading what they spell out.
There was one place that we could go where we could behave like normal human beings. A place where there was almost nothing of typographic interest.
That place was the internet.
But in the last few years that’s changed dramatically.
Web-Safe Fonts
For the longest time there were very few fonts you could use on the web. The internet enabled the transmission of information from author to reader to anyone online. But it could only display it in a font that both of them had installed on their machines.
Web designers did the only thing they could do. They turned to fonts that virtually every user had installed on their computers. They called them web-safe fonts.
The result was a lot of websites with content, headlines, navigation, and any other bit of text rendered in fonts like these:
Georgia
Times New Roman
Arial
Comic Sans
Impact
Trebuchet
Verdana
If you recognize them it’s because these are the fonts you’ve likely used to write countless emails, project proposals, college papers, thank you letters, memes, and terrible poems.
Some of them aren’t particularly good choices, and some are, but all of them made websites feel stale because there were only a few choices.
What’s interesting now is that websites don’t have to play it so safe anymore due to an old bit of technology that recently got all the pieces working correctly:
@font-face.
I won’t get into the technical details here but with a little bit of code and some fonts stored on your server or someone else’s, you can get pretty much any font to show up on your website.
Want something casual with a bit of flair for headlines. Try:
Lobster
Maybe you want your headlines to be punchy and honest. Try:
CHUNKFIVE
Or maybe you want a readable but distinctive font to communicate the bulk of a blog article.
Cabin is great at large paragraphs.
How can @font-face help you?
For anyone who felt that part of their brand was lost in translation when viewed through a browser, @font-face might just be the interpreter you were looking for.
Chances are, your corporate typefaces can now be proudly displayed on your website for a small licensing fee. Even if you don’t have a specific typeface for your brand, your website might just stand out a bit more compared to your competitors if you get away from web-safe fonts.
If you aren’t at the stage where you want to pay to license a well-established font, there are font collections online that are both well-curated and free.
Google has amassed a large collection of free fonts online that can be integrated into your website pretty easily. You can browse their library here.
Font Squirrel also has a large collection of free fonts that can be put to use on your website. Their filters are also helpful in making sure the higher quality fonts find their way to the top of the stack. You can explore their selection here.
You can even download them and host them on your server. Make sure you have a reliable hosting service. We have been recommending Hostinger for a lot of our clients and had positive feedback from them. Learn more about Hostinger.
A couple of warnings though. @font-face is far from perfect for a few reasons.
- It doesn’t work reliably in email clients yet, or old versions of browsers.
- It can affect load times if you use too many of them.
- Not all fonts were created with the web in mind and may be illegible or just plain ugly at certain sizes or on certain platforms and browsers.
That last one is a bit tricky, so I recommend consulting a designer or developer to test anything you find out there before implementing it on your website.
How do you get cool new fonts onto your website?
If you know your way around CSS, you can peruse this fine article on how to implement @font-face