In a previous post, I wrote about system fonts and their advantages over web fonts. I supported the "system fonts first" approach, arguing that compared to system fonts, web fonts (a) can negatively impact performance, (b) use more data, and (c) increase your site's power consumption. But a web without web fonts would be much less interesting - perhaps by using web fonts more responsibly, we can get all of their benefits while minimizing the downsides.
In the first part of this tutorial, I'll cover five methods to improve the performance of web fonts that I think will have the most impact with the least amount of effort.
Credit to Zach Leserman, who wrote extensively about web fonts on his site. All of his articles are worth reading, especially The Font Loading Checklist and A Comprehensive Guide to Font Loading Strategies (which is really very comprehensive), both of which proved to be very helpful while writing this post.
, , :
(typeface) — , . ( , , ). Helvetica — . .
(font) — . , , , , «Helvetica Bold Italic 10 ». , ( , ).
1.
Web Open Font Format 2.0 (woff2) is the smallest and most efficient file format for web fonts at the time of writing. When using @ font-face at-rules in CSS, make sure the woff2 font renders before older, less efficient file formats like ttf. The browser will use the first font in the list that it understands, even if it is a larger file.
@font-face { font-family: 'Typefesse'; src: url('typefesse.woff2') format('woff2'), url('typefesse.woff') format('woff'); }
If you don’t need IE8 support, you don’t need anything other than woff2 and woff. If you don't need IE11 support, you only need woff2.
If you only have a ttf file (for example, if you downloaded a font from Google Fonts), you will need to convert it using a tool like Online Font Converter . If you are not using a fully open source font, first check if the license permits it.
2. Use the descriptor font-display
There are two acronyms that you will often see as you begin to understand font loading strategies:
- Flash of Invisible Text (foit) is the period of time during which the text is invisible before the browser loads the web font.
- Flash of Unstyled Text (fout) is the period of time that text is rendered using the fallback font before the browser loads the web font.
None of the above is perfect, but if you are using web fonts, some of this is likely to happen the first time a user visits your website (hopefully, when the second page loads, the browser will be able to serve the fonts from its cache). If we take our at-rule font-face from the previous one and add a font-display descriptor , we can tell the browser which one we prefer.
@font-face { font-family: 'Typefesse'; src: url('typefesse.woff2') format('woff2'), url('typefesse.woff') format('woff'); font-display: swap; }
There are five possible font-display values: first, auto is the default browser behavior (most browsers prefer foit). Here are four more:
swap
swap tells the browser that we want the text to be displayed using the fallback font until the web font is loaded (i.e., we would rather use fout). Whether it takes 5 seconds or 5 minutes, as soon as the font is downloaded, it will be replaced. This is a good foundation because it allows website visitors to start reading your content right away, but be sure to select a similar option (we: We'll cover fallback options in part two of this article series) to prevent large layout misalignments when changing fonts.
block
If we prefer that the browser hides the text until the web font is loaded (i.e. we would prefer foit), we can use font-display: block. However, the text will not remain invisible forever: if the font does not load for a certain period (usually three seconds), the browser will still use the fallback font, replacing it with the web font after it has loaded.
If you think this is the best option because you think the image looks bad, remember that when the text is invisible, your page cannot be used and your content cannot be read.
fallback
fallback is similar to swap with two differences:
- It starts with an incredibly small (~ 100ms) "block" period when the text is hidden, after which the fallback font is displayed.
- If the web font does not load for a short period of time (~ 3 s), the fallback font will be used until the end of the page.
If you're not worried about whether a user sees your web font the first time they visit your site (they probably don't care that much), fallback is a good choice.
optional
optional is similar to fallback, but gives the font a very short period of time (~ 100ms) to load, after which it will not be replaced. However, it has an additional feature that allows the browser to decide to abort the font request if the connection is too slow to load the font.
foit/fout — , . ( . - Mitt Romney). JavaScript ( ).
3.
To minimize the foit / fout period, we want to load our web font files as quickly as possible. Using
link rel = "preload"
in our html
head
, we can tell the browser to start fetching our fonts earlier. Add the following tag to the top of your
head
(before any css) by setting an attribute
href
to the url of your font file:
link rel="preload" href="/typefesse.woff2" as="font" type="font/woff2" crossorigin
By adding this tag we are telling the browser to start downloading our font file right now, whereas normally it won't start until it finds the link to a specific font in your CSS and won't find the dom element that uses it.
Browsers are usually smart enough to only load fonts when needed on the current page. Using preloading overrides this behavior, forcing the browser to download the font even when not in use. For this reason, always preload only one format of each font (woff2, if you have one).
The more fonts you preload, the less benefit you will get from this method, so prefer fonts that appear “above the fold” (the first 100vh that the user sees without scrolling).
You can read more about preloading in this article by Yoav Weiss: Preload: What Is It Good For?
4. Pick up the font files
By creating a subset of the font, we can generate a new smaller font file that only includes the glyphs (a glyph is a single character or character) that we need. I used the Font Subsetter tool in Everything Fonts to match the Space Grotesk Bold font used for the headings on this site to include only Basic Latin characters. This reduced the file size of the woff2 version from 30KB to 7KB.
Subset is a powerful tool, but it has some potential drawbacks. If you are creating a website that displays user generated content, people names, or place names, you should use characters other than the 26 standard letters, 10 numbers, and a few characters common in English writing.
At a minimum, you should think about diacritics: glyphs that appear above or below a character that alter its pronunciation. They are common in languages including French, Spanish, Vietnamese, and transliterated (or "romanized") text from alphabets such as Greek or Hebrew; they also appear in loan words (words taken from another language).
If you are too active in subsetting, you might even end up with a combination of fonts in a single word.
If I wanted to write about the do-it-yourselfer, I might have to customize the font subset file that I use for the headings. Note how the forms "â" and "é" (with accents) do not match the non-accented versions of these letters.
Fortunately, you don't have to manually check every page on your site for different characters. GlyphhangerIs a command line tool that does two things: First, it crawls your web pages and determines the Unicode character ranges in use (these ranges correspond to the script or language, for example Basic Latin, Cyrillic, Thai) ; second, it is a subset of the font file, outputting a new version containing only characters from the specified ranges.
Getting started with Glyphhanger can be a little tricky (you need python and pip) - Sarah Sueidan explains how she did it in this article: How I set up Glyphhanger on macOS for optimizing and converting font files for the Web .
As with changing file formats, make sure your font license allows a subset of.
5. Place the fonts yourself
This is not a universal rule like most others. There are two good reasons why you might want to use a hosted service like Google Fonts or Adobe Fonts :
This is often the cheapest or only legal way to use certain typefaces on the Internet. If you have no choice but to use one of these services, see if it supports subsetting or adding font display descriptors.
They are handy: copying and pasting a line of html in your site will be faster than the alternative: downloading the font files, converting and a subset of the font files, then writing @ font-face at-rules for each weight and style.
If you're still using Google Fonts purely for convenience, take a look at google-webfonts-helper . This tool allows you to create your own web font package from the full set of Google fonts, define the weights and character sets you want, and then provide you with one download containing all the css and font files (in the latest formats) you need.
Myth # 1 About Web Fonts You
may have heard the assertion (repeated in Google Fonts) that if a user has previously visited a site that downloads the same fonts from the same source, the browser does not need to download them again because they are cached ...
Once this may have been true, but I cannot find evidence that this is a common enough phenomenon that would affect something. In fact, both Google Chrome and Safari explicitly prohibit sharing cached third-party resources across domains due to tracking issues.
Here's a list of good reasons not to use the hosted service and instead host the fonts yourself:
Performance
Finding a domain takes time, you can use resource hints to ease the situation, but always performance is always degraded by opening a TCP connection to a new domain. This may be why some of Google's own sites (including web.dev ) now use native fonts instead of Google fonts.
Confidentiality
Paid web font services, such as Adobe Fonts, must determine pageviews for calculations, but they may collect more data than is strictly necessary. If you have a choice, load fonts using css (
link rel = "stylesheet"
) instead of JavaScript (
script
) to minimize the amount of data a third party might collect about your users.
It looks like Google Fonts doesn't collect as many website visitors as IP addresses and User agent strings, but Google isn't completely selfless in providing the service for free. Each of the fifty trillion page views using Google fonts is a data point that Google wouldn't have if websites were using their own fonts instead.
Control
With offline fonts, you have complete control over how you load the fonts, allowing you to serve custom subsets, define font display options, and specify how long the browser should cache font files.
Reliability
Third-party services may slow down, disconnect, or stop working altogether . With self-hosted fonts, while your website is running, your fonts will be available.
Conclusion
Each of these steps can have benefits in their own right, but using them together can lead to big improvements. If you decide to follow some of the steps in this article, try using a tool such as Lighthouse or Web Page Test before and after making your changes to see the effect of each individual change.
In part two, we'll look at some of the more advanced techniques, including JavaScript font loading strategies and variable fonts. We will also see the importance of choosing the right fallback fonts and introduce a new acronym - FOFT, Flash Of Faux Text.
In order not to lose my design findings in tons of bookmarks on my computer, I created the Drin Design Telegram channel . All cool and useful materials (tutorials, articles, links to accounts of cool dudes) that I find for myself, I will post there. Help yourself.