Using @font-face to introduce fonts and set font-display to control loading behavior is key. 1. Correctly introduce fonts: Use @font-face to declare font paths and formats, give priority to using WOFF2 and maintain compatibility; 2. Control loading behavior: It is recommended to use font-display: swap to avoid page flashing; 3. Performance optimization: Loading font weights on demand, font subsetting, enabling caching strategies, and using system font alternatives to improve loading speed.

Loading and controlling custom web fonts is not complicated, but if the details are not handled well, problems are prone to occur. Many people will encounter situations where fonts are loading slowly, pages are flashing, or styles are not effective at the beginning. The key is to understand several core concepts and make good use of the relevant attributes provided by CSS.

1. Use @font-face to correctly introduce fonts

This is the basis for custom fonts. You can use the @font-face rule in CSS to declare the font file path and style information you want to use.

 @font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

• Make sure the path is correct : the URL of the font file is relative to the location of the CSS file.
• Priority to using WOFF2 : It compresses better and loads faster.
• Multiple formats are for compatibility : although modern browsers support WOFF2, adding a WOFF as a backup can take care of the old system.

2. Control font loading behavior: avoid layout jitter

By default, the browser will use the system font to display text before the font is loaded, and switch to the past after the custom font is loaded. This can cause "text flickering" (FOIT or FOUT).

You can control this process through font-display property:

• auto : It is up to the browser to decide how to display (usually manifested as FOIT)
• swap : Show alternate fonts immediately and replace them after the custom font is loaded
• fallback : Wait for a short time for custom fonts, otherwise use alternate fonts
• optional : Fonts may not load at all, suitable for mobile devices to save traffic

Recommended for use in most scenarios:

 @font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

This ensures that the page content is displayed as soon as possible and the user experience is more stable.

3. Performance optimization suggestions: reduce impact and improve loading speed

Font files are usually relatively large, and if not paid attention, it will affect the performance of the page.

Some practical suggestions:

• ?Load only the word weight and style you need
  For example, only Regular and Bold are needed, and don’t introduce all font variants.

• ?Use subset fonts
  If your website is mainly Chinese or English, you can generate font files that contain only the required characters, greatly reducing the size.

• ?Enable CORS and cache policies
  If the font comes from the CDN, make sure the server is configured with the correct CORS header and set a reasonable caching policy.

• ? Consider using system fonts as an alternative
  Not all users need to see the font you specified. When designing, alternate fonts should be considered to not affect readability.

Basically that's it. Use @font-face and font-display well, and cooperate with some performance optimization methods to find a balance between visual and loading experience. Not particularly difficult, but many newbies ignore the impact of font loading on the overall experience.

The above is the detailed content of Embedding and Controlling Custom Web Fonts with CSS. For more information, please follow other related articles on the PHP Chinese website!