Use @font-face to load custom fonts with attention to syntax, format compatibility and performance optimization. 1. Correct writing methods include specifying font name, multi-format path (such as woff2, woff), setting font-weight and font-style, and using relative paths or CDN; 2. Prioritize the woff2 format, followed by woff, and the font format can be converted through tools; 3. In terms of performance, the character set and variant number should be limited, and font-display: swap should be used to avoid blank text; 4. Self-hosting can improve control and privacy protection, but it requires self-processing of file configuration and server MIME type support.

Loading custom web fonts with @font-face is a common practice for many websites to implement personalized font styles. The key is correct writing, compatible format, and reasonable loading performance.

1. Basic syntax and structure

The core function of @font-face is to tell the browser where to load the font file and specify a name for subsequent CSS use. The basic writing method is as follows:

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

When using it, you only need to call this name in the style:

 body {
  font-family: 'MyCustomFont', sans-serif;
}

A few points to note:

• Try to provide a variety of formats (such as woff2, woff) to ensure compatibility.
• Don't miss font-weight and font-style , otherwise some systems may not recognize variants.
• The font path should be accurate, and it is recommended to use relative paths or CDN paths.

2. Font format selection and conversion

Currently, the mainstream recommendation is to use .woff2 first, which has high compression rate and fast loading, followed by .woff . Older browsers may require .ttf or .eot , but these can be ignored now.

If you only have .ttf or .otf files, you can convert them to a web-friendly format through the tool:

• Font Squirrel @font-face Generator
• Transfonter

After generation, you will usually get multiple format font files and corresponding CSS fragments, and copy them directly into your style sheet.

3. Performance and load optimization

Loading custom fonts will affect the page rendering speed, especially when large font files or slow networks.

Some optimization suggestions:

• Load only the required character set : For example, if you only need English numbers, don't include glyphs in all languages.
• Limit the number of font variants : Each @font-face is a request, trying to merge or reduce unnecessary bold and italic declarations.
• Use font-display to control display behavior : You can add this property in @font-face to control the display strategy during font loading, for example:

 @font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Recommended value*/
}

swap means to display it with system fonts first, and then replace it after the custom font is loaded to avoid the problem of blank text.

4. Self-hosting vs. using services (such as Google Fonts)

Many people use Google Fonts services to introduce fonts at the beginning, which is simple and convenient. But if you want to have complete control over font resources, or for privacy reasons, self-hosting is a good choice.

Advantages of self-hosting:

• More controllable, no dependence on third parties
• Reduce external requests and improve load consistency
• Supports more personalized font customization

Disadvantages are also obvious:

• Need to handle font files and format conversion by yourself
• The server needs to configure the MIME type (some hosts do not support font types by default)
• The initial setup is a little more complicated

Basically that's it. As long as you pay attention to the format compatibility, loading method and performance impact, it is not difficult to implement custom fonts with @font-face , but it is easy to ignore the details.

The above is the detailed content of Implementing custom web fonts using @font-face css rule. For more information, please follow other related articles on the PHP Chinese website!