System fonts and browser safe fonts load without external font requests, making them the fastest options. Robinson says branding, design, and consistency lead many sites to use web fonts, citing an estimate that 82% of web pages do so.
What are Web Fonts?
Lee Robinson of leerob explains web font performance best practices for 2021.
Robinson recommends self-hosting fonts when performance is the priority. He explains that browser cache partitioning removed much of the cross-site caching benefit that once made Google Fonts attractive. For self-hosted files, he demonstrates a one-year immutable Cache-Control header.
With a simulated Fast 3G connection, Robinson shows how font loading can cause a flash of unstyled text or invisible text. He recommends `font-display: optional`, which has a short block period of about 100 milliseconds, and preloading fonts so the browser discovers them sooner. He pairs this with a system font stack, placing Inter first to make the fallback look more similar.
Variable fonts can combine weights and styles in one file, reducing network requests, while subsetting removes unused characters and languages. In his example, individual font files are about 290 KB each, a variable file is 748 KB, and a Latin subset WOFF2 file is 37 KB.
Robinson's four recommendations are to use a variable font, preload it, self-host it, and set `font-display: optional` to help prevent layout shift. He also points to a proposed CSS feature for font metric overrides that could reduce layout shift when fonts change.
Takeaways
- Use system fonts when a custom typeface is not essential, since they avoid font downloads.
- When performance matters, self-host fonts and set long-lived caching headers for files that do not change.
- Preload the font you need and use `font-display: optional` to limit disruptive font swaps.
- Choose variable fonts and subset them to the characters your site uses to reduce requests and file size.
- Tune the fallback stack so it resembles the custom font when the font does not load in time.
Mentioned in this talk
Search inside this talk
What was claimed 13
- featuresystem font stack: Avoids external font requests
“you'll see that we're not making any external requests.”
YouTube Unverified1 source· Talk
- uses
GitHub uses system font stack“it's still what they use on their website.”
YouTube Unverified1 source· Talk
- featureGoogle Fonts: Provides access to over a thousand fonts, multiple formats, and defaults
“With over a thousand different fonts, they provide really easy access to quality fonts, multiple formats, and pretty good defaults.”
YouTube Unverified1 source· Talk
- metricGoogle Fonts: Accounts for about 70% of web font usage as of 2020
“Google Fonts accounts for about 70% of all web font usage.”
YouTube Unverified1 source· Talk
- feature
Google: Recommended self-hosting fonts for performance as of 2018“As of 2018, even Google itself has been recommending self-hosting fonts if performance is your number one priority.”
YouTube Unverified1 source· Talk
- uses
Vercel uses self-hosting“I'm self-hosting my fonts through Vercel.”
YouTube Unverified1 source· Talk
- featurefont-display: Optional has an approximately 100 millisecond block period, then falls back without a swap period
“It has an extremely low block period, around 100 milliseconds.”
YouTube Unverified1 source· Talk
- featureCore Web Vitals: Include performance metrics such as First Contentful Paint and cumulative layout shift
“Time to Interactive and First Contentful Paint, which are Core Web Vitals”
YouTube Unverified1 source· Talk
- featurefont subsetting: Strips unused characters from a font file to reduce file size
“Subsetting allows you to strip the file back to only the things you're actually using.”
YouTube Unverified1 source· Talk
- featurevariable fonts: Combine multiple weights and styles into a single font file, reducing network requests
“Variable fonts allow us to combine multiple weights and styles into a single font file, reducing the number of network requests.”
YouTube Unverified1 source· Talk
- metricfont subsetting: Optimized WOFF2 font file is 37 kilobytes
“our optimized WOFF2 font file is 37 kilobytes.”
YouTube Unverified1 source· Talk
- metricvariable fonts: 748 kilobytes for the example Google Fonts file
“it's 748 kilobytes.”
YouTube Unverified1 source· Talk
- featurefont metric overrides: Proposed CSS feature intended to reduce layout shift when swapping web fonts
“This will allow you to swap out your web fonts while having a lot less layout shift.”
YouTube Unverified1 source· Talk
