The font

🔝 page static resources | pictures on a stand – 🔙

Sometimes, the built-in fonts are not enough for our needs. If we want to use a more designable font, we usually use @font-face to load the font file:

@font-face {
    font-family: 'Samplefont';
    src: url(/static/samplefont.woff2) format('woff2'),
         url(/static/samplefont.woff) format('woff');
}
Copy the code

One problem with this approach, however, is that the browser page does not display text content by default during font loading. This is commonly known as FOIT (Flash of Invisible Text). In modern browsers, FOIT lasts up to three seconds and can lead to a poor user experience. Therefore, in the performance optimization of the font part, the main focus is how to load the font smoothly. Here are some solutions.

1. Font clipping

Font performance problems are often caused by large font files that take a long time to load. Therefore, one way to deal with this problem is to crop the font to “slim down” the font file to load. Because a font library may contain many characters (especially in Chinese), but not every character will be used, it is possible to remove fonts that are not needed.

For example, for scenarios where only numbers are needed, you can strip out all other useless words, leaving only numbers and some necessary punctuation. There are many tools on the web for cutting fonts, so you can choose them yourself.

2. font-display

You can set font display in @font-face: Swap, which can change the default behavior of FOIT to FOUT (Flash of Unstyled Text), that is, the Text will be displayed using the default font style first, and then the font style will be replaced after the font is loaded.

@font-face {
    font-family: 'Samplefont';
    src: url(/static/samplefont.woff2) format('woff2'),
         url(/static/samplefont.woff) format('woff');
    font-display: swap;
}
Copy the code

The font – display values including auto | block | swap | fallback | optional, here introduces in detail the use of various values scenario [1]. For now (2021.6.5) compatibility with this property should be just fine.

3. Inline fonts

As we explained in the previous section, you can use Base64 to “inline” images into a page. Similarly, fonts can be used in this way to avoid FOIT or FOUT when loading fonts asynchronously. We can convert the font file to a base64 string and set it to the SRC property in @font-face: SRC;

@font-face {
    font-family: 'Samplefont';
    src: url('data:application/x-font-woff; charset=utf-8; Base64, d09GRgABAAAAAHyoABMAAAAA4XQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABG... ') format('woff2');
}
Copy the code

The limitation of this approach is that only one font type can be loaded in an @font-face. Also, as with inline images, this serializes data that could be requested in parallel.

4. Use CSS Font Loading API

The CSS Font Loading API is a browser-provided API that allows you to customize Font Loading. This allows you to load the font in JavaScript, and when the load is complete, set the style of the element to which the new font should be applied, such as adding a className. Here is how to use the CSS Font Loading API[2].

The CSS Font Loading API may have compatibility issues. At the same time, a perfect polyfill cannot be achieved due to some difficulties. So if you want to use similar capabilities, consider the Font Face Observer library. The basic usage is as follows:

const font = new FontFaceObserver('Samplefont');

font.load(null.5000).then(
    () = > document.documentElement.classList.add('loaded'),
    () = > console.log('Font is not available'));Copy the code
@font-face {
    font-family: 'Samplefont';
    src: url(/static/samplefont.woff2) format('woff2'),
         url(/static/samplefont.woff) format('woff');
}

body {
    font-family: sans-serif;
}

.loaded h1 {
    font-family: Samplefont, sans-serif;
    font-weight: 700;
}
Copy the code

5. FOFT

The Flash of Faux Text (FOFT) method is very effective when you need to load bold and italic fonts of the same font.

The first thing you need to understand is that there are special character sets for italic and bold fonts; At the same time, if you specify a bold font and the browser doesn’t load it, you can use the Font-synthesis property to have the browser simulate it for you. When the actual bold or italic fonts are loaded, use the actual font set.

In practice, the CSS Font Loading API or Font Face Observer mentioned above will be used to realize the style modification after the Font is loaded.

If you look at font optimizations, they focus on how to reduce or even eliminate FOIT through loading strategies. Of course, you can combine the strategies and techniques mentioned above to achieve the desired optimization.

If you want to learn more about font loading, take a look at the various loading strategies summarized in this article [3], along with code examples.

That’s it for font performance optimization, and now we’ll go to the last stop of page static resource optimization — video.

If you like, please follow my blog or subscribe to RSS feed.

“Performance Tuning” series

  1. Bring you a full grasp of front-end performance optimization 🚀
  2. How can caching be used to reduce remote requests?
  3. How can I speed up requests?
  4. How to speed up page parsing and processing?
  5. What is the general idea of static resource optimization?
    1. How to optimize performance for JavaScript?
    2. How to optimize the PERFORMANCE of the CSS?
    3. Graphics are great, but they can also cause performance problems
    4. Do fonts also need performance optimization? (this paper)
    5. 🔜 How to optimize video performance?
  6. How can you avoid performance problems at run time?
  7. How can preloading improve performance?
  8. The end of the

At present, all the content has been updated to ✨ fe-performance-Journey ✨ warehouse, and the content will be synchronized to the nuggets one after another. If you want to read the content as soon as possible, you can also go directly to the repository.

The resources

  1. Controlling Font Performance with font-display
  2. Getting started with CSS Font Loading
  3. A COMPREHENSIVE GUIDE TO FONT LOADING STRATEGIES