The key to introducing custom fonts with @font-face is format selection, path accuracy and compatibility considerations; 1. First, ensure that the basic structure of @font-face is written correctly, specify the font-family and src attributes, and give priority to the use of .woff2 and .woff formats; 2. Note that the path should be relative or absolute paths, and ensure that the server can provide font files correctly; 3. In terms of compatibility, it is recommended to provide .woff2 and .woff to adapt to modern browsers. TTF/OTF can be used as backups, and EOT and SVG have been basically eliminated; 4. Common problems during use include cross-domain loading, path errors need to check whether the writing is correct, the font is not effective, and the corresponding font-family is used, and performance impact can be optimized by compressing fonts or reducing font weight; 5. In actual applications, Google Webfonts can be used to use Google Webfonts Helper or Font Squirrel tools generate code while configuring the MIME type and using font-display: swap to avoid text flickering.

It is not difficult to introduce custom fonts using the @font-face rules of CSS. The key is to select the right format, write the correct path, and consider the compatibility carefully.

Understand basic syntax structure

@font-face is the rule used in CSS to load custom fonts. It allows you to specify a font name and the location of the font file, and the browser will automatically download and apply the font. The most basic writing method is probably like this:

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

The key point here is the src attribute, which tells the browser where to find the font file. Be careful to write relative or absolute paths and make sure that the server provides these font files correctly. Also, it is recommended to provide both .woff2 and .woff formats, as they are best supported in modern browsers and have high compression rates.

Font format selection and compatibility

Different browsers have different support for font formats, so choosing the right format is very important. The current mainstream approach is to use .woff2 and .woff :

• WOFF2 : The highest compression rate and faster loading, suitable for most modern browsers.
• WOFF : Older alternatives, better compatibility.
• TTF/OTF : Although it can be used, it is large in size and slow in loading. It is recommended to be used only as a backup.
• EOT : It is mainly to support old IE (such as IE9 and below), which can be basically ignored now.
• SVG : Only used on very old mobile devices (before iOS 4.1), and not much needed.

If you are not sure which formats to put, adding .woff2 and .woff is basically enough.

Frequently Asked Questions When Using Local Fonts

After the introduction of fonts, you may encounter several common problems:

• Cross-domain problem : If the font file is loaded from another domain name, the server must set the correct CORS (cross-domain resource sharing) header, otherwise some browsers may refuse to load.
• Font path error : Check whether the path written in the CSS file is correct, especially when the font file is placed in a subdirectory.
• Font not working : Make sure you are actually using font-family: 'MyCustomFont' in the style, otherwise it won't show up even if it is loaded.
• Performance impact : Too large font files may affect the page loading speed. You can use tools to compress the font, or only load the font weight you need (such as only loading 400 and 700).

For example, if you introduce a font but the text still remains unchanged, it is likely that the corresponding font-family is not set on the specific element.

Tips for practical application

• It is recommended to use Google Webfonts Helper or Font Squirrel @font-face Generator to generate better compatibility @font-face code.
• If you host your own fonts, remember to configure the MIME type, otherwise some servers may prevent the font file from loading.
• Use font-display: swap; to let the browser display the default font first, and then replace it after the custom font is loaded, avoiding the problem of "flashing" the text.

Basically all of this is it, it looks simple, but there are several details that are prone to errors, especially the two parts of path and format.

The above is the detailed content of Integrating Custom Fonts using CSS @font-face rule. For more information, please follow other related articles on the PHP Chinese website!