How to Use 'Fonts' Application?

The Fonts application lets you optimise your fonts for faster loading and a better user experience. It offers features such as the generation of WOFF/WOFF2 formats, rendering control with font-display, and the creation of font subsets, improving the performance of your website.

Why is it important to optimise your fonts?

Fonts, like many other resources such as style sheets (CSS) and Javascript scripts, can have a dual impact: they can make your pages heavier, slow them down, and block rendering if your loading and display strategy is not optimal.

Any deterioration in loading speed leads to a drop in your metrics, which makes browsing unpleasant for users and can have a negative impact on the key user experience indicators measured by Google.

Find out more about PageSpeed Insights: optimising fonts for web performance

How do I use the "Fonts" application?

Fonts Face

The Font Face feature lets you optimise font loading by generating WOFF and WOFF2 formats, subsetting resources, autohinting and adding a font-display declaration.

Insert Missing Format:

It is necessary to add the missing WOFF22 and WOFF formats, in case your web font does not download quickly enough. If, on top of this, no text appears, your visitors may think your site is having problems and leave the page.

By using these formats, you ensure a consistent and optimal experience for all users, reducing page load times and ensuring that fonts display correctly on a variety of devices and browsers.

These formats can reduce the size of font files by up to 50%, halving their loading time.

Insert Font Display:

This option is used to define how fonts should be displayed when they are loaded on a web page.

The possible values for font-display are: auto, block, swap, fallback.

Each of these options modifies the rendering behaviour of fonts during loading, thus influencing the perceived performance of the site.

Here are the different possible values:

1. Auto: This is the default value. With this option, the browser decides the best method for displaying fonts based on various factors such as loading time and rendering priority. This can lead to different behaviour in different browsers.
2. Block: When you use this option, the font is blocked until it is fully downloaded. This means that text using this font will not be displayed until the font has been downloaded, which can cause a delay in page rendering.
3. Swap: With this option, a backup font is displayed immediately while the main font is being downloaded. Once the main font is downloaded, it is replaced by the backup font. This avoids a noticeable delay in page rendering.
4. Fallback: This option first displays a fallback font, then replaces it with the main font once it has been downloaded. This is similar to the "Swap" option, but it ensures that the text is still readable even if the main font takes longer to load.

This declaration can help optimise the user experience by controlling the way fonts are loaded and displayed on the page.

Extract the online source: Extracting the source of fonts online means that external files can be repatriated to your domain. By doing this, you avoid DNS negotiations, which saves a few milliseconds on loading.

Google Fonts

This feature will allow you to optimise and improve the CSS loading of Google Fonts.

Google Font Display: When you use Google Fonts on your website, you have the option of defining how these fonts should be displayed during page loading using the "font-display" option. This option allows you to control the rendering behaviour of fonts before they are fully downloaded.

Async Load: Asynchronous loading of CSS files enables style sheets to be downloaded in parallel with other page resources, improving performance by reducing loading times and enabling content to be rendered more quickly.

Subset

Font subsetting is the process of taking a complete font file as input and creating other smaller files containing only the characters required to display your pages, thereby reducing the file size and improving page loading performance.

Unicode Ranges: The "Unicode ranges" option allows you to choose the character sets to be included in the reduced version of the font. For example, by selecting "Latin", only characters belonging to the Latin character set will be retained in the resulting font file.

Languages: The 'Languages' option allows you to select the character sets used for a specific language. This means that you can select the characters required for a given language and exclude others.

These two options reduce the size of the font file and improve page loading performance.

Webperf advantage

Reducing the size of font files and optimising their loading can significantly improve metrics such as Speed Index and LCP, especially if the largest element on the page is a block of text. This guarantees an improvement in your other metrics and the overall user experience.