Open the lab →
Guide

How to Add Google Fonts to Your Website (and Keep It Fast)

Step-by-step: add Google Fonts with a link tag, @import or self-hosting, load only the weights you need, and avoid layout shift and slow pages.

Updated November 14, 2026

Google Fonts makes it easy to use high-quality typefaces on any website for free. But adding fonts carelessly is one of the most common causes of slow pages and layout shift. Here is how to do it properly.

Option 1: the <link> tag (recommended)

Add these lines inside your page's <head>. The two preconnect hints let the browser open connections to Google's servers early:

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

Then use the font in your CSS: font-family: 'Inter', sans-serif;.

Option 2: @import in CSS

You can also import fonts from your stylesheet with @import url('https://fonts.googleapis.com/css2?...');. It is convenient but slightly slower, because the browser must download your CSS before it discovers the font CSS. Prefer the link tag when you can.

Only load the weights you use

Every weight and style is a separate file. Requesting all nine weights plus italics of a family can add hundreds of kilobytes. Specify exactly what you need, for example family=Lora:ital,wght@0,400;0,700;1,400 for regular, bold and italic. Every embed code generated by fontombo includes only the weights you actually chose.

Use font-display: swap

The &display=swap parameter tells the browser to show text immediately in a fallback font, then swap in the web font when it arrives. Without it, some browsers hide text for up to three seconds — terrible for perceived speed.

Reduce layout shift

When the web font swaps in, text can reflow if the fallback font has different proportions. Choose a fallback with similar metrics (for example Georgia for many serifs, Arial for many sans serifs), and consider the CSS size-adjust descriptor to match them more closely.

Option 3: self-hosting

All Google Fonts are open source, so you can download the files and serve them from your own domain. Self-hosting gives you full control over caching, avoids third-party requests (which can simplify privacy compliance in some regions) and can be faster when combined with <link rel="preload"> for your most important font file. Use WOFF2 files and subset them to the characters you need.

Variable fonts

Many Google Fonts are variable fonts: a single file contains a continuous range of weights (and sometimes widths or other axes). If you use three or more weights of the same family, a variable font is usually smaller than separate static files. Request a range like wght@300..800.

Checklist

  • Preconnect to fonts.googleapis.com and fonts.gstatic.com.
  • Request only the families, weights and styles you use.
  • Always include display=swap.
  • Pick sensible fallback fonts.
  • Consider variable fonts or self-hosting for performance-critical sites.

Find your combination in the pairing tool, then use the </> button on any combo to copy a ready-to-paste, optimised embed code.

More guides