Tool: Using and optimizing your Google Fonts

Google Fonts is a tool offered by Google to download fonts for free. You can either use them locally or import them via the HTML tag <link> or the CSS @import rule. Google Fonts are already optimized and designed to be compatible with all browsers.

Add Google Fonts

To add Google fonts, simply select the fonts you want to use and click on embed.

Google offers two ways to embed your fonts:

• Embed a tag in the of your pages

<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

• Add a CSS @import rule in your style sheets

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

To activate your Google Fonts, you need to apply the corresponding CSS rule to the selected fonts, to the elements you want to style.

font-family: 'Open Sans', sans-serif;

Tips and recommendations for optimizing your Google Fonts

Google Fonts are already optimized but can still slow down the loading of your pages and affect your SEO ranking.

• Limit the number of fonts on your pages;
• Select only the variants of the fonts you use, there is no need to add the full fonts;
• Avoid multiplying tags, maximize your requests by merging your fonts to load them in one go;
• Download and host your fonts directly on your site.

Read more