How to use Google Fonts and font-display

Key Takeaways
- Google Fonts is a free, open-source platform offering a vast library of web fonts that can be incorporated into web projects for visually appealing and consistent designs across devices.
- The font-display property is a crucial aspect of using Google Fonts, controlling the rendering behavior of a font during the loading process and helping optimize user experience by reducing the impact of slow font loading.
- Google Fonts can be added to a project through two primary methods: linking and importing. Both methods involve selecting the desired font from the Google Fonts website and adding the provided code to the HTML or CSS file.
- The font-display property has five possible values (auto, block, swap, fallback, optional) that determine how a font is rendered during the loading process, thus allowing for customization of the user experience.
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:
- What are Google Fonts?
- What is the font-display Property?
- How to Add Google Fonts to Your Project
- Understanding the Various font-display Values
- Implementing the font-display Property with Google Fonts
- 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:
- Visit the Google Fonts website.
- Browse or search for the font you want to use.
- Click on the font to open its details page.
- Select the font styles and weights you need by clicking on the checkboxes or using the slider.
- Click the “Select this style” button to add the selected font styles to your collection.
- 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:
- Follow steps 1–5 from the linking method.
- In the Embed tab, switch to the @import tab.
- 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 selectedfont-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 usingswap
orfallback
. If you’re experiencing FOUT, consider usingblock
orfallback
. - 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 theauto
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.
Frequently Asked Questions on Using Google Fonts
How can I optimize Google Fonts for better website performance?
Optimizing Google Fonts can significantly improve your website’s performance. You can achieve this by hosting the fonts locally, which reduces the number of HTTP requests, or by using the ‘font-display’ property. This property controls how a font is displayed based on whether and when it is downloaded and ready to use. The ‘swap’ value, for instance, ensures text remains visible during font loading, thus improving user experience.
What are the benefits of using Google Fonts?
Google Fonts offers a wide variety of free, open-source fonts that are easy to use on any website. They are hosted on Google’s servers, ensuring high-speed access and reliability. Additionally, they are optimized for both desktop and mobile platforms, providing a consistent user experience across different devices.
How can I add Google Fonts to my WordPress website?
Adding Google Fonts to a WordPress site is straightforward. You can use a plugin like ‘Swap Google Font Display’ or ‘Fonts Plugin’. These plugins allow you to easily choose and customize Google Fonts directly from your WordPress dashboard, without needing to edit any code.
How can I use Google Fonts in my CSS?
To use Google Fonts in your CSS, first select the font from the Google Fonts website. Then, copy the provided link tag and paste it into your HTML file’s head section. Finally, copy the CSS rules provided by Google Fonts and paste them into your CSS file, applying them to the desired elements.
Can I use Google Fonts offline?
Yes, you can use Google Fonts offline by downloading the font files and installing them on your computer. However, please note that this method is recommended for personal use only, as hosting Google Fonts locally for a website requires adherence to certain licensing terms.
How can I change the font display in Google Fonts?
You can change the font display in Google Fonts using the ‘font-display’ property in your CSS. This property controls how a font is displayed based on whether and when it is downloaded and ready to use. The ‘swap’ value, for instance, ensures text remains visible during font loading.
Are Google Fonts compatible with all browsers?
Google Fonts are designed to be compatible with all modern web browsers, including Chrome, Firefox, Safari, and Edge. However, some older versions of these browsers may not support certain features or fonts.
How can I find the best Google Font for my website?
Google Fonts offers a variety of tools to help you find the best font for your website. You can filter fonts by category, language, and other properties. Additionally, you can preview each font with custom text and settings to see how it will look on your website.
Can I use multiple Google Fonts on my website?
Yes, you can use multiple Google Fonts on your website. However, keep in mind that each additional font increases the load time of your website. Therefore, it’s recommended to limit the number of fonts used to maintain optimal website performance.
How can I update Google Fonts on my website?
Google Fonts are hosted on Google’s servers and are automatically updated. However, if you’re hosting the fonts locally, you’ll need to download and install the updated font files manually.
Mark Harbottle is the co-founder of SitePoint, 99designs, and Flippa.