HTML & CSS

How to use Google Fonts and font-display

Mark Harbottle
Share

In this tutorial, we’ll explore how to use Google Fonts and the font-display property.

Google Fonts is a free, open-source platform that offers a vast library of web fonts. As a web developer, incorporating these fonts into your projects is essential for creating visually appealing and consistent designs across various devices. One crucial aspect of using Google Fonts effectively is understanding the font-display property, which determines how a font is rendered during the loading process.

We’ll cover the following topics:

  1. What are Google Fonts?
  2. What is the font-display Property?
  3. How to Add Google Fonts to Your Project
  4. Understanding the Various font-display Values
  5. Implementing the font-display Property with Google Fonts
  6. Troubleshooting Common Issues

What are 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 appearance. Google Fonts are optimized for performance and accessibility, making them ideal for web development.

What is the font-display Property?

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

How to Add Google Fonts to Your Project

There are two primary methods to add Google Fonts to your project: linking and importing.

Linking Google Fonts

Linking is the most common method of adding Google Fonts to your project. To do this, follow these steps:

  1. Visit 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 styles and weights you need by clicking on the checkboxes or using the slider.
  5. Click the “Select this style” button to add the selected font styles to your collection.
  6. Open the “Embed” tab, and you’ll see a link tag that you can add to the head section of your HTML file.

For example, to add the “Roboto” font, the link tag will look like this:

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

Importing Google Fonts

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

  1. Follow steps 1–5 from the linking method.
  2. In the Embed tab, switch to the @import tab.
  3. Copy the provided code snippet and paste it at the top of your CSS file.

For example, to import the “Roboto” font, the @import rule will look like this:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Understanding the Various font-display Values

The font-display property has five possible values, each with a different rendering behavior:

  • auto
  • block
  • swap
  • fallback
  • optional

Auto

The auto value leaves the font rendering behavior up to the browser’s default settings. This option can result in inconsistent rendering across different browsers:

font-display: auto;

Block

The block value instructs the browser to hide text initially and wait for the font to load. If the font doesn’t load within a short period, the browser will display the fallback font. Once the custom font finishes loading, the browser will swap the text to use the custom font. This method can result in a “flash of invisible text” (FOIT) while waiting for the font to load:

font-display: block;

Swap

The swap value tells the browser to display the text using the fallback font immediately and swap to the custom font once it’s loaded. This method can cause a “flash of unstyled text” (FOUT) but ensures that the text is visible to the user from the start:

font-display: swap;

Fallback

The fallback value is a combination of block and swap. The browser will initially hide the text for a brief period (usually around 100ms). If the custom font loads within this time, the browser will display it. Otherwise, it will show the fallback font. After a longer period (usually around three seconds), if the custom font still hasn’t loaded, the browser will give up and keep using the fallback font:

font-display: fallback;

Optional

The optional value is similar to fallback but with a shorter waiting period for the custom font to load. If the custom font doesn’t load within this short period (browser-dependent), the browser will give up and continue using the fallback font. This method prioritizes the user experience and performance over the exact font rendering:

font-display: optional;

Implementing the font-display Property with Google Fonts

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

Using the link method

  • Follow steps 1–6 from the linking section above.
  • In the Embed tab, locate the Customize section.
  • In the Font-display dropdown menu, choose the desired font-display value.
  • The link tag will be updated with the selected font-display value. Add the updated link tag to the head section of your HTML file.

For example, to add the “Roboto” font with a font-display value of swap:

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

Using the @import method

  • Follow steps 1–3 from the importing method above.
  • In the Embed tab, locate the Customize section.
  • In the Font-display dropdown menu, choose 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 the “Roboto” font with a font-display value of swap:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Troubleshooting Common Issues

Here are a few common issues and solutions when using Google Fonts and the font-display property.

Issue: Custom font not loading or displaying

  • Ensure that you have correctly added the link tag or @import rule to your HTML or CSS file.
  • Check for typos or incorrect URLs in the link or @import code.
  • Verify that the correct font family name and weight are being used in your CSS rules.

Issue: Flash of invisible text (FOIT) or flash of unstyled text (FOUT)

  • Choose a different font-display value to better suit your requirements. For instance, if you’re experiencing FOIT, try using swap or fallback. If you’re experiencing FOUT, consider using block or fallback.
  • Ensure that your custom font is being loaded as early as possible in the page’s loading process by placing the link or @import code near the top of the head section or CSS file.
  • Optimize your font file size by only selecting the necessary font styles and weights.

Issue: Inconsistent font rendering across browsers

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

That’s it!

Conclusion

In this article, we explored how to use Google Fonts and the font-display property to create visually appealing and performant websites. By understanding the different font-display values and their implications, you can optimize your font rendering for an improved user experience. Make sure to test your implementation across various browsers and devices to ensure consistent appearance and performance.

As a web developer, incorporating Google Fonts and the font-display property into your projects will enable you to create professional and accessible designs that cater to a wide range of users.