How to use locally installed font files on web pages?

Apply local installed fonts in web pages

In web design, you may want to use a specific font that is already installed in the system, but using the font name directly in CSS does not work. This article will demonstrate how to correctly call locally installed fonts in a webpage.

Problem: Local fonts cannot be displayed in web pages

Suppose you have installed the font "Jingnan Mai Round" but the CSS code:

 html, body {
  font-size: 18px;
  font-family: "Jingnan Mai Round Body", "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Still displaying "Microsoft Yahei" instead of "Jingnan Mai Round Body". You don't want to load font files through src attribute because the font files are large in size.

Solution: Use @font-face rules

The key to solving this problem is to use the @font-face rule, which allows you to define custom fonts and apply them to web page elements. Since you want to use locally installed fonts, there is no need to specify the src path. The browser will automatically find and use the fonts installed on the system.

The correct CSS code is as follows:

 @font-face {
  font-family: 'JingNanMaiYuanTi'; /* Define the font name, it is recommended to use the English name*/
}

html, body {
  font-size: 18px;
  font-family: 'JingNanMaiYuanTi', "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

The key is:

1. Define font name: Define an easily recognizable font name (such as English name) in the @font-face rule to avoid the compatibility issues that may arise from Chinese names.
2. Use Font Name: Use the font name defined in step 1 in font-family property. The browser will prioritize finding the font corresponding to this name. If not found, alternative fonts are used in turn.

After modifying the CSS code, if it still fails to display, try refreshing the browser cache or restarting the browser. Make sure your operating system is properly installed and enabled.

The above is the detailed content of How to use locally installed font files on web pages?. For more information, please follow other related articles on the PHP Chinese website!