Optimize Fonts

Although often overlooked, reducing and optimizing how web fonts are loaded is a great opportunity to improve page speed and refine design style for a better all-around user experience.

It's no secret that a stylish website design strengthens the impact of it's message and can make an important impact on user experience and various forms of conversion like sales, lead capture email signups and more.

Best In Moderation

Unique custom web fonts can be a great design enhancement and add a valuable layer of visual interest, but with the benefit comes the performance trade-off and potential load time pitfalls. Largely due to simplified methods for adding fonts to websites, custom fonts have become very common across the web and it can be tempting to use fonts too liberally.

Although variable fonts are becoming more standard, each additional traditional font or font variant typically means an additional file, so shrewd choices about which fonts really make an impact and which can be omitted will reduce page weight - usually with little to no negative effect on overall user experience.

How Many Fonts For Optimal Page Speed?

The size of the needed files varies among fonts so the best balance for speed will depend on the particular fonts used. In most cases a good general rule is to use one font style for headings and one for regular paragraph text, with a sensible limit of four to six total font variants.

Limit custom web fonts to ~4 total font variants for optimal page speed.

For example, one font for (1) general paragraph text plus (2) bold and (3) italic styles, with another font for (4) headings and other distinctive text elements.

Mobile Devices

To further reduce the number of fonts loaded on slower mobile networks and devices, custom fonts can be limited to larger screens or other conditions with HTML media attributes and CSS @media queries. Web browsers won't load font files that don't apply to the current media conditions, conserving that page weight.

For example, to avoid loading resources for a special heading font on mobile devices, that font-family can be limited to larger screens:

<!-- special font on larger screens -->
<link rel="stylesheet" media="(min-width:62em)" href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap">

And:

/*--- special font on larger screens ---*/
@media (min-width:62em) {
    h1 {font-family:'Merriweather'}
}

Note that with the html <link>, browsers will still download the CSS file even if the media condition doesn't match, but at a lower priority without render blocking and that CSS won't be applied to the page. As with the CSS @media query, the referenced font file(s) won't be downloaded at all.

System Fonts

One of the fundamental principles of page speed optimization is that the fastest loading file is that file that doesn't have to load at all. (This is part of why a shrewd review for opportunities to reduce resources and setting up cache control are important page speed strategies.)

The same is true for web fonts. With custom fonts so commonplace, it's easy to forget that they don't have to be used at all. They can also be used selectively, like a special custom font for headings but a common system font for general paragraph text.

Sometimes called web safe fonts, system fonts are already a part of the user's device software and ready to use without downloading. A list of fonts can be specified in the CSS code - often called a font stack - that the browser will use depending on what fonts are available on a given device.

A font stack of serif system fonts might look something like this but can be customized as needed:

/*--- general text font ---*/
body {font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif}

Font Services

While appropriately-licensed custom fonts can be self hosted, web font services leverage the power of CDNs and include options like custom character sets. Google Fonts is the most widely used, but there are other similar services.

Apply asynchronous CSS and resource hints for the speediest Google Fonts.

One of the benefits of third-party web font services is that the font files may have already been downloaded by the user's browser during a visit to another website. The browser saves those files and uses them on other websites without downloading them again.

Use Only What You Need

Font services also offer the option to load only the specific characters needed, rather than the full font file. This is a clever way to save page weight when only a few specific characters, words or phrases of a special font are needed.

Loading Custom Fonts

Fonts from web font services are most commonly added to a website with a <link> reference in the HTML. (An @import rule in CSS works as well, but generally results in poorer performance for third-party fonts.)

Here's an example of loading two variants of a font called Roboto from Google Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">

Asynchronous Google Fonts

Maximize Google custom web font performance! Along with a page speed boost from resource hints, eliminate the render blocking effect of Google Fonts by loading the font CSS resources asynchronously.