How to use Google Fonts and font-display

Core points

• Google Fonts is a free open source platform that provides a large number of web fonts that can be used in web projects to create beautiful and consistent cross-device design.
• font-display Properties are key to using Google Fonts, which controls the rendering behavior of fonts during loading and optimizes the user experience by reducing the impact of slow font loading.
• There are two main ways to add Google Fonts to a project: linking and importing. Both methods involve selecting the desired font from the Google Fonts website and adding the provided code to an HTML or CSS file.
• font-display Attributes have five possible values ​​(auto, block, swap, fallback, optional), which determine how the font is rendered during loading, allowing a custom user experience.

This tutorial will explore how to use Google Fonts and font-display properties.

Google Fonts is a free open source platform that provides a large library of web fonts. As a web developer, integrating these fonts into your project is essential to creating web pages that are visually engaging and consistently designed across a variety of devices. A key aspect of using Google Fonts effectively is understanding the font-display attribute, which determines how fonts are rendered during loading.

We will cover the following topics:

1. What is Google Fonts?
2. What is font-display Properties?
3. How to add Google Fonts to your project
   • Link Google Fonts
   • Import Google Fonts
4. Understanding various font-display Values ​​
   • auto
   • block
   • swap
   • fallback
   • optional
5. Implementation with Google Fonts font-display Properties
   • How to use links
   • Using @import Method
6. Troubleshooting of FAQs
   • Problem: Custom fonts cannot load or display
   • Problem: Invisible text flashing (FOIT) or non-style text flashing (FOUT)
   • Problem: Inconsistent font rendering across browsers

What is Google Fonts?

Google Fonts is a library of over 1,000 free licensed font families provided by Google. These fonts can be easily embedded into your website to create a unique, professional and consistent look. Google Fonts is optimized for performance and accessibility, making it an ideal choice for web development.

What is font-display Properties?

The

font-display property is a CSS function that controls the rendering behavior of fonts during loading. It determines how long the browser should wait for the font to load before displaying alternate fonts or text with invisible characters. By using the font-display attribute, you can optimize the user experience by reducing the impact of slow font loading on website design and performance.

How to add Google Fonts to your project

There are two main ways to add Google Fonts to your project: linking and importing.

Link Google Fonts

Links are the most common way to add Google Fonts to your project. To do this, follow these steps:

1. Get the Google Fonts website.
2. Browse or search for the font you want to use.
3. Click on the font to open its details page.
4. Select the font style and thickness you need by clicking the check box or using the slider.
5. Click the "Select This Style" button to add the selected font style to your collection.
6. Open the Embed tab and you will see a link tag that you can add to the header part of the HTML file.

For example, to add a "Roboto" font, the link tag will look like this:

<code class="language-html"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"></code>

Import Google Fonts

Alternatively, you can import Google Fonts using the @import rules in the CSS file. To do this, follow these steps:

1. Follow steps 1-5 in the link method.
2. In the Embed tab, switch to the @import tab.
3. Copy the provided code snippet and paste it on top of the CSS file.

For example, to import a "Roboto" font, the @import rule will look like this:

<code class="language-css">@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');</code>

Understand various font-display Values ​​

font-display Attributes have five possible values, each with different rendering behavior:

• auto
• block
• swap
• fallback
• optional

auto

auto Values ​​leave font rendering behavior to the browser's default settings. This option may cause inconsistent rendering between different browsers:

<code class="language-css">font-display: auto;</code>

block

block Value indicates that the browser initially hides the text and waits for the font to load. If the font is not loaded for a short period of time, the browser will display the alternate font. After the custom font is loaded, the browser will switch the text to use the custom font. This method may cause "Invisible Text Flashing" (FOIT) while waiting for the font to load:

<code class="language-css">font-display: block;</code>

swap

swap Value tells the browser to display text immediately using alternate fonts and switch to custom fonts after loading the custom font. This method may cause "non-style text flickering" (FOUT), but ensures that the user can see the text from the beginning:

<code class="language-css">font-display: swap;</code>

fallback

The value is a combination of

and fallback. The browser initially hides the text briefly (usually about 100 milliseconds). If the custom font is loaded within this time, the browser will display it. Otherwise, it will display alternate fonts. After a longer period of time (usually about three seconds), if the custom font is still not loaded, the browser will give up and continue to use the alternate font: block

<code class="language-html"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"></code>

optional

optional values ​​are similar to fallback, but the waiting time for custom fonts to load is short. If the custom font is not loaded for this short time (depending on the browser), the browser will give up and continue to use the alternate font. This approach prioritizes user experience and performance over precise font rendering:

<code class="language-css">@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');</code>

Implementation with Google Fonts font-display Properties

Google Fonts allows you to set the @import value directly in the link or in the font-display URL. To do this, follow one of the following options.

How to use links

• Follow steps 1-6 in the link section above.
• In the Embed tab, find the Customize section.
• In the "font-display" drop-down menu, select the desired font-display value.
The
• link tag will be updated with the selected font-display value. Add the updated link tag to the header part of the HTML file.

For example, to add a "Roboto" font with font-display value swap:

<code class="language-css">font-display: auto;</code>

Using @import Method

• According to steps 1-3 of the import method above.
• In the Embed tab, find the Customize section.
• In the "font-display" drop-down menu, select the desired font-display value.
The
• @import rule will be updated with the selected font-display value. Add the updated @import rule to your CSS file.

For example, to import a "Roboto" font with font-display value swap:

<code class="language-css">font-display: block;</code>

Troubleshooting of FAQs

The following are some common problems and solutions when using Google Fonts and font-display properties.

Problem: Custom fonts cannot load or display

• Make sure you have correctly added the link tag or @import rules to the HTML or CSS file.
• Check for misspelled or incorrect URLs in the link or @import code.
• Verify that the correct font family name and thickness are used in the CSS rule.

Problem: Invisible text flashing (FOIT) or non-style text flashing (FOUT)

• Select different font-display values ​​to better meet your needs. For example, if you encounter FOIT, try swap or fallback. If you encounter FOUT, consider using block or fallback.
• Make sure your custom fonts load as early as possible during the page loading by placing the link or @import code near the header section or near the top of the CSS file.
• Optimize font file size by selecting only the necessary font styles and thicknesses.

Problem: Inconsistent font rendering across browsers

• Set specific font-display values ​​instead of using auto values ​​to ensure consistent behavior across different browsers.
• Test your website on various browsers to identify any rendering issues and make necessary adjustments to your CSS.

Conclusion

In this article, we explore how to use Google Fonts and font-display properties to create visually engaging and high-performance websites. By understanding the different font-display values ​​and their meanings, you can optimize font rendering to improve the user experience. Be sure to test your implementation on a variety of browsers and devices to ensure consistency in appearance and performance.

As a web developer, integrating Google Fonts and font-display properties into your project will enable you to create professional and accessible designs that meet the needs of a wide range of users.

(The following is FAQ, which has been rewritten and streamlined according to the original text)

FAQs about using Google Fonts

• How to optimize Google Fonts to improve site performance? You can use the font-display attribute (for example, the swap value), or consider locally managed fonts to reduce HTTP requests.

• What are the benefits of using Google Fonts? Google Fonts offers a wide range of free, open source fonts that are easy to use, hosted by Google, fast and reliable, and optimized for desktop and mobile platforms.

• How to add Google Fonts to your WordPress site? Google Fonts can be easily added and customized using WordPress plugins such as "Swap Google Font Display" or "Fonts Plugin".

• How to use Google Fonts in CSS? Select a font on the Google Fonts website, copy the provided link tag to the section of the HTML file, and add the CSS rules to your CSS file.

• Can you use Google Fonts offline? Font files can be downloaded and used locally, but only for personal purposes. The website is subject to the authorization terms.

• How to change the font display in Google Fonts? Use the font-display property in CSS.

• Is Google Fonts compatible with all browsers? Compatible with most modern browsers, but older browsers may not support certain features or fonts.

• How to find the best Google Fonts for my website? The Google Fonts website provides filtering functions, filtering fonts by category, language and other attributes, and can be previewed.

• Can you use multiple Google Fonts on my website? Yes, but each font will increase the loading time, and it is recommended to limit the number.

• How to update Google Fonts on your website? Google Fonts is hosted by Google and will be updated automatically. If hosted locally, you need to update manually.

The above is the detailed content of How to use Google Fonts and font-display. For more information, please follow other related articles on the PHP Chinese website!