“Webfont… what’s that and why do I need them?” Trying to explain to a non-technical client the what, why and which webfonts are needed can be like having a conversation with a 2 year old in the ‘but why?’ stage.
Here’s a quick break down of the 3 W’s to help keep clients from doing a @font-face-palm!
A fairy tale story…
One upon a time, the web was filled with boring, standard fonts. In order to ensure compatibility across the greatest number of users, web designers were forced to limit their live text font choices to those typefaces commonly found on most machines.
Font licensing can really be a mess so directly embedding random fonts into a web page isn’t always a good idea.
This wasn’t the worst thing in the world for the sake of consistency and readability, but it really limited the typographical creativity of the web as a whole. With CSS3, most browsers started supporting @font-face, a way to serve up custom fonts to a web page. Unfortunately, font licensing can really be a mess so directly embedding random fonts into a web page isn’t always a good idea.
Introducing Web Font Services
As a solution, a number of @font-face web font services rose up, the best and most famous of which is likely Typekit. Typekit had a beautiful solution: browse through their extensive library of fonts, then just copy and paste some code to implement them on your site.
Typekit had a beautiful solution: browse through their extensive library of fonts, then just copy and paste some code to implement them on your site.
The only problem with services like this is that the cost structure, $49-$99 if you want more than two sites, prohibits many designers from using them. Google came along and did what they always do: took a premium service and offered it up free.
The quality and variety of the typefaces that you’ll find on premium services like Typekit are understandably much better than what you can get for free, but if they’re just not in the budget then Google Web Fonts is absolutely your best bet.
There are a number of other services that will host fonts and provide access to commercially-licensed fonts as well. The benefits of using a service often boil down to having a large selection of legal fonts delivered efficiently (e.g. serving them on a speedy CDN).
Here are a few hosted font services:
Locally Installed Webfonts
Another option, yet not as optimized, is to use locally installed webfonts. Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.
| Format | IE | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| TTF / OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | N/A | 36.0 | 35.0* | N/A | 26.0 |
| SVG | N/A | 4.0 | N/A | 3.2 | 9.0 |
| EOT | 6.0 | N/A | N/A | N/A | N/A |
*IE: The font format only works when set to be “installable”.
*Firefox: Not supported by default, but can be enabled (need to set a flag to “true” to use WOFF2).
WOFF / WOFF 2.0
Stands for: Web Open Font Format
Created for use on the web, and developed by Mozilla in conjunction with other organizations, WOFF fonts often load faster than other formats because they use a compressed version of the structure used by OpenType (OTF) and TrueType (TTF) fonts. This format can also include metadata and license info within the font file. This format seems to be the winner and where all browsers are headed.
WOFF2 is the next generation of WOFF and boasts better compression than the original.
SVG / SVGZ
Stands for: Scalable Vector Graphics (Font)
SVG is a vector re-creation of the font, which makes it much lighter in file size, and also makes it ideal for mobile use. This format is the only one allowed by version 4.1 and below of Safari for iOS. SVG fonts are not currently supported by Firefox, IE or IE Mobile. Firefox has postponed implementation indefinitely to focus on WOFF.
SVGZ is the zipped version of SVG.
EOT
Stands for: Embedded Open Type
This format was created by Microsoft (the original innovators of @font-face) and is a proprietary file standard supported only by IE. In fact, it’s the only format that IE8 and below will recognize when using @font-face.
OTF / TTF
Stands for: OpenType Font and TrueType Font
The WOFF format was initially created as a reaction to OTF and TTF, in part, because these formats could easily (and illegally) be copied, However, OpenType has capabilities that many designers might be interested in (ligatures and such).
Although you may be able to get away with just using the .woff file, if you want to be as requirements of different web browsers, as each have limitations as to what file types they can support.
A Note on Performance
Web fonts are great for design but it’s important to also understand their impact on web performance. Custom fonts often cause sites to take a performance hit because the font must be downloaded before it’s displayed.
A common symptom used to be a brief moment where fonts first load as the fallback, then blink to the downloaded font. Paul Irish has an older post on this (dubbed “FOUT”: Flash Of Unstyled Text).
These days, browsers are generally hiding the text before the custom font loads by default. Better or worse? You decide. You can exert some control over this through various techniques. A little out-of-scope for this article, but here’s a trifecta of articles by Zach Leatherman to get you started down the rabbit hole:
- Better @font-face with Font Load Events
- How we use web fonts responsibly, or, avoiding a @font-face-palm
- Flash of Faux Text—still more on Font Loading
Here are some more considerations when implementing custom fonts:
Watch the file size
Fonts can be surprisingly heavy, so lean towards options that offer lighter versions. For example, favor a font set that is 50KB versus one that weighs 400KB.
Limit the character set, if possible
Do you really need the bold and black weights for one font? Limiting your font sets to load only what is used is a good idea and there are some good tips on that here.
Consider system fonts for small screens
Many devices are stuck on crappy connections. One trick might be to target larger screens when loading the custom font using @media.
In Conclusion
Here’s the gist: Google Web Fonts is a completely free and super easy way to implement non-standard fonts on your website in a properly licensed and widely supported fashion.
Useful Resources
- 15 Best Web Safe Fonts by Robert Mening
- List of Web Safe Fonts
- A Comprehensive Guide to Font Loading Strategies by Zach Leatherman
- How we use web fonts responsibly, or, avoiding a @font-face-palm by Zach Leatherman
All comments posted on 'What Are Webfonts? — for Clients' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.
You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.
Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.