How to optimize fonts for improved performance

Best practices in font use

When choosing a font for your website, it’s important to take several criteria into account to optimize performance and user experience.

Font selection

Legibility: choose a font that’s easy to read on screen, with well-defined letters and regular spacing. Avoid overly stylized or decorative fonts, which can make reading difficult for users.
Weight: choose a lightweight font to reduce the loading time of your website. Large fonts can significantly slow down your website’s loading time, especially on mobile devices.
Compatibility: check that the font is compatible with different browsers and operating systems. It’s important to test your website on different browsers and devices to ensure that the font displays correctly.

Loading from Google Fonts

Loading a font from Google Fonts may be less optimized for several reasons:

Loading time: When you load a font from an external server, it can increase the loading time of your website. Fonts must be downloaded before content can be displayed, which may cause the page to display slowly.
HTTP Requests: Each font you load from an external server requires an additional HTTP request. This can slow down the loading time of your website, especially if you load multiple fonts.
Third-party dependence: When you load a font from an external server, you depend on the availability and reliability of that server. If the server is down or the connection is slow, it can affect the performance of your website.
Privacy: When you load a font from an external server, information about your website visitors may be collected by the font provider. This may raise privacy and data protection concerns.

If you need to use Google Fonts for your website, there are several ways to optimize font loading:

Use only the fonts you need: Limit the number of fonts you load from Google Fonts by using only those you really need. Avoid loading unnecessary fonts that are not used on your website.
Use character subset syntax: If you only need a subset of characters for a given font, you can use character subset syntax to reduce the font size. For example, if you only need the basic Latin characters, you can add &subset=latin to the font URL.
Use the font-display property: The CSS font-display property can be used to control how fonts are displayed during loading. By using font-display: swap;, you can display a backup font until the custom font is loaded, which can improve the user experience.
Use preloading: Preloading fonts can help reduce loading time by telling the browser to load fonts before they’re needed. You can use the <link> tag with the rel="preload" attribute to preload fonts.
Use preconnection: DNS Prefetch and Preconnect are two techniques used to improve website performance by reducing the latency associated with DNS requests and network connections.

DNS Prefetch

DNS Prefetch consists in performing an early DNS resolution for domains that will be used in future queries. This reduces the latency associated with DNS resolution by performing this operation before the user needs the resource.

To implement DNS Prefetching for Google Fonts, simply add this line to your <head> web pages:

<link rel="dns-prefetch" href="//fonts.googleapis.com">Code language: HTML, XML (xml)

Preconnect

Preconnect, for its part, allows you to deepen the DNS prefetch, it establishes an early network connection (DNS Resolution + TCP/TLS Negotiation) with the servers which host the resources necessary for the web page. This helps reduce the latency associated with establishing the network connection by doing so before the user needs the resource. It is now supported by all recent browsers.

<link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin>Code language: HTML, XML (xml)

Here is a complete code example to load a font from Google Fonts with the optimizations above:

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap&subset=latin" as="style" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap&subset=latin" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-display: swap;
    }
  </style>
</head>Code language: HTML, XML (xml)

In this example, we preload the Roboto font with weights 400 and 700, the latin character subset, and the font-display: swap; property. We also use a <noscript> tag to provide a fallback for browsers that do not support preloading.

Although Google Fonts is a popular and convenient service for uploading custom fonts, it is important to consider these factors and strike a balance between personalization and optimizing your website’s performance. Using system or local fonts can be a more optimized alternative to improve your website’s performance.

Using system and local fonts

Another option is to use system or local fonts rather than external fonts. System fonts are already installed on the user’s device, which means they load faster than external fonts. Local fonts are stored locally on your website server, which also reduces loading time.

Here is example code for using a system font:

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}Code language: CSS (css)

This code uses a stack of common system fonts to ensure that the font displays correctly across different devices and browsers.

The following system fonts are considered “safe fonts” because they are installed on most modern operating systems:

Arial
Helvetica
Verdana
Tahoma
Trebuchet MS
Times New Roman
Georgia
Courier New
Palatino
Garamond
Bookman Old Style
Arial
Impact
Comic Sans MS

These fonts are often used as fallback fonts in CSS stylesheets to ensure that content displays correctly, even if the primary font is unavailable. Although they may seem a bit generic, they offer good readability and high compatibility with different browsers and operating systems.

If you prefer to use a local font, you can store it on your server and use the following code to include it in your website:

@font-face {
  font-family: 'MyFont';
  src: url('/path/to/font.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}Code language: CSS (css)

This code defines a new font called “MyFont” and specifies the location of the font files on your server. You can then use this font in your CSS stylesheet by setting the font-family property.

By using system or local fonts, you can improve the performance of your website and provide a faster, smoother user experience.

The WOFF2 format

WOFF2 (Web Open Font Format 2.0) is a compressed font format that offers several advantages over other font formats. Here are some reasons why you should use the WOFF2 format:

Reduced file size: The WOFF2 format is designed to reduce font file sizes while maintaining font quality. This means that WOFF2 fonts load faster than other font formats, which can improve the performance of your website.
Cross-compatibility: The WOFF2 format is supported by most modern browsers, including Chrome, Firefox, Safari, Edge and Opera. This means you can use WOFF2 fonts on your website without worrying about cross-browser compatibility.
Better compression: The WOFF2 format uses more advanced compression than other font formats, enabling you to further reduce the size of font files. This can be particularly useful for large or complex fonts.
Unicode support: The WOFF2 format supports unicode, which means you can use WOFF2 fonts to display characters in different languages and scripts.

In summary, using the WOFF2 format can improve your website’s performance by reducing font file size, while offering cross-compatibility and unicode support. If you use custom fonts on your website, we recommend using the WOFF2 format to optimize your site’s performance.

Using a single font

There are several advantages to using a single font throughout your website. Firstly, it reduces the number of HTTP requests needed to load fonts, which can improve your website’s performance. Indeed, each HTTP request takes time and can slow down the loading of your site. By using a single font, you reduce the number of HTTP requests needed to load fonts, which can reduce your site’s loading time.

In addition, using a single font helps harmonize the visual appearance of your site. By using the same font for all elements of your site, you create a consistent and professional appearance. This can help users become familiar with your site and navigate more easily.

Setting up a fallback

Although webfonts are widely supported by modern browsers, it is important to implement a fallback to ensure compatibility with older browsers that do not support webfonts. A fallback is a fallback font that will be displayed if the primary font is not available.

To implement a fallback, you can use the CSS font-family property. In this property, you specify a comma-separated list of fonts. The browser will use the first font in the list that is available on the user’s system.

Here is an example of code to set up a fallback:

body {
  font-family: 'Roboto', Arial, sans-serif;
}Code language: CSS (css)

In this example, the Roboto font will be used as the first choice. If the Roboto font is not available on the user’s system, the browser will use the Arial font instead. If the Arial font is not available either, the browser will use a generic sans-serif font.

Optimize the display

To optimize the display of webfonts, there are different advanced options: size-adjust, variable fonts, font subsetting and preloading.

Scale fallback fonts with `size-adjust` to reduce CLS

When using fallbacks, it is important to set the size-adjust value for each font in the fallback list. This ensures that the font size will be consistent, even if the primary font is unavailable and a fallback font is used instead.

The examples on the right use size-adjust to ensure that 64px is the final consistent size — The examples on the right use `size-adjust` to ensure that 64px is the final consistent size

This property can be used to create a custom font with adjusted glyph size.

Here is sample code for using size-adjust:

@font-face {
    font-size: 16px;
    font-family: "Roboto-fallback";
    size-adjust: 100.05%;
    ascent-override: 97%;
    src: local("Arial");
}

body {
  font-family: Roboto, "Roboto-fallback", Arial, sans-serif;
}Code language: CSS (css)

If the Roboto font is not available on the user’s system, the browser will use the Arial font instead. However, Arial font size may be different from Roboto. By setting the value of size-adjust for each font in the fallback list, we can ensure that the font size will be consistent, even if a fallback font is used.

Finding the Right Font Size

There is this sizing calculator to save you time. The advantage is that all Google Fonts are available, but it only works on Chromium browsers. Otherwise you can adjust manually with tools like Fallback Font Generator or Font style matcher.

It is important to note that the size-adjust value may vary depending on the font used. It is therefore recommended to test the size-adjust value with each font in the fallback list to ensure that the font size is consistent in all cases.

By using size-adjust with fallbacks, you can ensure that the font size will be consistent across browsers and operating systems, even if the primary font is unavailable. This can help improve user experience and ensure your website is accessible to all users.

If the generic glyph scaling options aren’t enough to adjust your design or loading strategies, there are more fine-grained tuning options that work with size-adjust. The ascent-override, descent-override, and line-gap-override properties are currently supported in recent browsers.

Ascent-override: The ascent-override property defines the height above the base of a font. This property is used to adjust the height of uppercase letters so that they fit perfectly into the overall bounding box.
Descent-override : The descent-override property defines the height below the font reference. This property is used to adjust letters so that they fit perfectly on the base.
Line-gap-override : The line-gap-override property defines the line-gap metric for the font. This is the recommended line spacing or outside line spacing for the font.

Reduce CLS

Cumulative Layout Shift (CLS) is a performance indicator that measures the visual stability of a web page. When fonts are loaded, they can cause layout lag, which can negatively affect the user experience.

To reduce CLS, it is recommended to use the smooth font replacement technique. This technique involves displaying a fast-loading system font to display content first, then replacing it with a web font after it finishes loading. However, this can sometimes cause a layout shift when the webfont is loaded.

To avoid this problem, you can use size-adjust to adjust the size of the system font glyphs to match that of the web font. This allows for smooth swapping of fonts without layout lag.

Here is sample code for using size-adjust with the smooth font replacement technique:

/* Set fallback system font with size-adjust */
@font-face {
  font-family: 'Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Arial');
  size-adjust: 55%; /* Adjustment of glyph size */
}

/* Set the web font to the same size as the system fallback font */
@font-face {
  font-family: 'Web Font';
  font-style: normal;
  font-weight: 400;
  src: url('/path/to/font.woff2') format('woff2');
  font-size: 16px; /* Same font size as the system fallback font */
}

/* Apply the system fallback font to all elements on the page */
body {
  font-family: 'Fallback', sans-serif;
}

/* Replace the fallback system font with the web font once loaded */
@font-face {
  font-family: 'Web Font';
  font-display: swap; /* Smooth font exchange */
}Code language: CSS (css)

In this example, we define a system fallback font with size-adjust to adjust the size of the glyphs. We then set the web font to the same font size as the system fallback font. Finally, we apply the fallback system font to all elements on the page and replace it with the web font once loaded using the font-display: swap property;.

Variable fonts

Different font weights in a single "variable" file — Different font weights in a single “variable” file

Variable fonts are a new technology that allows you to reduce the weight of fonts by combining several variations of the same font in a single file. With variable fonts, you can adjust the weight, italics, width, and other properties of a font continuously, rather than having multiple files for each variation. This provides several performance benefits:

A single HTTP request: by using a single variable font instead of multiple static fonts, the number of HTTP requests needed to load all the fonts required for a web page is reduced to 1. This can reduce page load times and improve the user experience.
Reduced file size: variable fonts are often smaller than equivalent static fonts, as they store only the information needed to generate intermediate variants. This can reduce the amount of data to be downloaded, which can be particularly important for mobile users with slow connections.
Greater typographic flexibility: variable fonts enable the creation of more flexible and adaptive designs, as they offer a greater variety of font variations. This can enable designers to create more expressive and creative designs, while maintaining high performance.

Here is an example code to use variable fonts from Google Fonts:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap" rel="stylesheet">Code language: HTML, XML (xml)

In this example, we are using the Roboto font with a weight (thickness) range between 100 and 900. We can then use the font-variation-settings property to adjust the font weight according to our needs.

To use variable fonts, you must first ensure that your font supports this feature. Many popular fonts, such as Roboto, Arial, and Helvetica, have variable versions available. You can then use the following CSS syntax to define a variable font:

@font-face {
  font-family: 'MyVariableFont';
  src: url('/path/to/font.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 50% 200%;
}Code language: CSS (css)

In this example, we define a variable font named MyVariableFont with a thickness range between 100 and 900 and a stretch range between 50% and 200%. We also use the woff2-variations format to indicate that the font supports variations.

Once you have your variable font defined, you can use it in your CSS like any other font. You can use the font-variation-settings property to adjust font variations, like this:

h1 {
  font-family: 'MyVariableFont';
  font-size: 48px;
  font-weight: 700;
  font-stretch: 125%;
  font-variation-settings: 'wght' 700, 'wdth' 125;
}Code language: CSS (css)

In this example, we use the variable font MyVariableFont for the title h1, with a font size of 48px, width of 700, and stretch of 125%. We also use the font-variation-settings property to adjust the thickness and stretch variations to 700 and 125 respectively.

By using variable fonts, you can reduce the number of HTTP requests, reduce the size and number of files, and improve the typographic flexibility of your website, while maintaining high performance.

Font Subsetting to reduce file size

Font subsetting is a technique of loading only the necessary characters of a font, rather than the entire font set. This significantly reduces the font file size, which can improve loading times and overall website performance.

You can analyze your fonts online to identify unused characters in a given font. This can help reduce font size by removing unnecessary characters, which can improve loading times and overall website performance.

There are several free online tools for analyzing fonts, such as Wakamai Fondue or FontDrop.

To perform font subsetting, there are several free online tools such as Font Squirrel and Transfonter. Here are the general steps to perform font subsetting using Font Squirrel:

Go to the Font Squirrel website and select the “Webfont Generator” option.
Download the font you wish to use on your website.
Select the “Optimal” or “Expert” option to access the advanced settings.
In the “Subsetting” section, select the characters you wish to include in your font. You can choose from predefined options such as “Latin Basic” or “Cyrillic”, or manually select the characters you need.
Click on the “Download your kit” button to generate your font with the font subsetting applied.
Download the generated font kit and use it on your website.

To create a font subsetting with more possibilities, you can use tools like Glyphhanger based on the open source fonttools project. Here are the steps to follow:

Install Python: So you need to download and install the latest version of Python 3 by following the instructions in the installer.
Install fonttools: Once Python 3 is successfully installed, open the terminal and install fonttools using pip (which comes with Python) by typing the following command:

python3 -m pip install fonttoolsCode language: Shell Session (shell)

Install Brotli: Next install Brotli compression, which is required to generate a WOFF2 file. Type the following command:

python3 -m pip install brotliCode language: Shell Session (shell)

Move to the folder containing the font: Use the cd command to move to the folder containing the font file you want to convert. For example :

cd /your-project/fonts/Code language: Shell Session (shell)

Run fonttools: Finally, run the fonttools subsetting routine using the desired options. For example :

pyftsubset Roboto-variable.ttf 
  --unicodes="U+0020-007F, U+00A0-00FF, U+0100-017F, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2100-214F, U+2200-22FF, U+FB00-FB4F" 
  --layout-features='*' 
  --flavor="woff2" 
  --output-file="Roboto-variable.woff2"Code language: Shell Session (shell)

In this example, from the Roboto-variable.ttf font we generate a WOFF2 file in the same folder.

The unicodes option specifies the characters to include in the font, using Unicode character ranges. If the font does not contain all characters within the specified Unicode ranges, they will simply be ignored. In this example we have the following ranges:

U+0020-007F : Basic Latin
U+00A0-00FF : Latin-1 Supplement
U+0100-017F : Latin Extended-A
U+2000-206F : General Punctuation
U+2070-209F : Superscripts and Subscripts
U+20A0-20CF : Currency Symbols
U+2100-214F : Letterlike Symbols
U+2200-22FF : Mathematical Operators
U+FB00-FB4F : Alphabetic Presentation Forms

The layout-features option specifies which OpenType features to include, such as kerning, ligatures, numbers, and alternate characters. In this example, we use layout-features='*' to include all available features. You can also add selected features to the default game. For example, layout-features+=onum,pnum,ss01 will keep the default feature set and add onum, pnum, and ss01 (old digits, proportional, and styleset 1).

Using this method of subsetting for the Roboto-variable font, we reduced the size of the original file from 913 KB to 207 KB. Although this is still relatively large, we have been conservative in the subsetting by keeping many European characters and OpenType features, and as a variable font, this file will cover all weight and optical contrast situations.

It is important to note that the subsetting of a font can have consequences on its visual rendering. Therefore, it is recommended to carefully test the font after subsetting to ensure that all necessary characters are included and that the font is displayed correctly.

By using these techniques, you can significantly reduce your font size while still retaining the characters needed for your content. This can help improve your website performance and provide a better user experience.

Preloading fonts to reduce LCP

LCP measures the time it takes to display the largest visible element in the initial display area of the page. Webfonts can lag LCP if they are not loaded and rendered quickly.

Preloading is a technique of loading critical resources on a web page before they are needed. By preloading webfonts, you can improve the performance of your website and reduce the loading time of your pages.

Here’s how to set up webfont preloading:

Identify critical webfonts for your website. These are the fonts that are used for titles, buttons and other important elements on your site.
Add a <link> tag in the <head> section of your HTML to preload these fonts. The <link> tag must include the rel="preload" attribute and the as="font" attribute to indicate that the resource is a font.

Here is example code to preload a font:

<link rel="preload" href="/fonts/roboto-variable.woff2" as="font" type="font/woff2" crossorigin="anonymous">Code language: HTML, XML (xml)

In this example, we preload the Roboto Regular font in WOFF2 format. The crossorigin="anonymous" attribute is used to enable sharing of resources between domains.

The crossorigin attribute is used to indicate how the browser should handle Cross-Origin Resource Sharing (CORS) requests for a given resource. When the attribute is set to anonymous, it means that the CORS request will be performed without sending cookies or other identifying information. This allows resources to be shared across domains without compromising security.

It is important to note that the crossorigin attribute can also be set with an empty value, i.e. crossorigin="", which will have the same effect as crossorigin="anonymous".

In the case of preloading fonts, using the crossorigin="anonymous” attribute is important because it allows the browser to retrieve the font from another domain without any security restrictions. If the crossorigin attribute is not included or is set to a value other than anonymous or empty, the browser may block the CORS request and prevent the font from loading correctly.

By using the crossorigin="anonymous" attribute, you can ensure that the font will be correctly loaded from another domain, which can be particularly useful if you are using a CDN to host your fonts. This also helps reduce loading times by allowing the browser to fetch the font in parallel with other resources.

By implementing webfont preloading, you can improve the performance of your website and provide a faster, smoother user experience.

Conclusion

Optimizing webfonts is therefore a key element in improving the performance of a website and providing an optimal user experience. To do this, it is important to choose a unique font, set up a fallback for older browsers and avoid CLS. You also need to use advanced technologies such as size-adjust and variable fonts. While preloading fonts and using subsetting to reduce file size.

By following these best practices, you can reduce your website load time, improve LCP and CLS metrics, and provide a more pleasant user experience. Remember that webfont optimization is an ongoing process and it is important to test your website’s performance regularly to make any necessary adjustments.

Finally, using tools like Perfect-ish Font Fallback and fonttools can help you further optimize your fonts for the web.

FAQ

What does subsetting do and how can it improve my website performance?

Font subsetting is a technique which consists of reducing the size of a font while retaining only the characters necessary to display the content of your website. This reduces the size of the font file and therefore improves the loading times of your website. To make a font subsetting, you can use tools such as fonttools or Glyphhanger.

What are variable fonts and how can they improve the performance of my website?

Variable fonts are a new technology that allows multiple variations of a font to be stored in a single file, rather than having a separate file for each variation. This helps reduce the number of HTTP requests needed to load fonts, which can improve your website load times. Additionally, variable fonts allow for greater flexibility in typographic design, which can improve the user experience.

What is font preloading and how can it improve my website performance?

Font preloading involves informing the browser to load a font before it is needed to display content. This reduces the waiting time for the font to load and therefore improves the loading times of your website. To preload a font, you can use the <link> tag with the rel=”preload” attribute in the HTML code of your web page.

What is CLS and how does it affect my website performance?

CLS (Cumulative Layout Shift) is a measure of the visual stability of a web page. When elements on the page move while loading, it can disrupt the user experience and negatively affect your website’s performance. To reduce CLS, you can use techniques such as font subsetting, preloading fonts, and using fixed font sizes.

What are the benefits of using system fonts for my website?

System fonts are fonts installed by default on users’ operating systems. By using system fonts for your website, you can reduce loading time and improve the performance of your website because users do not need to download new fonts. Additionally, system fonts are often optimized for on-screen display and can provide better readability for users. However, using system fonts can limit the typographic design options for your website.