How to optimise Google Fonts for FCP, LCP, and CLS: A Complete Guide

Google Fonts is a brilliant resource—free, accessible, and packed with high-quality typefaces. It’s a no-brainer for developers and designers looking to add a polished touch to their sites. But when it comes to performance, fonts, including those from Google, can negatively impact crucial metrics like First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS).

This article unpacks how fonts impact these metrics and how to optimize their implementation—covering everything from self-hosting to preloading and preventing layout shifts.

Table of contents

Why Google Fonts Can Be a Problem for Performance
How to Fix Google Fonts for Better FCP, LCP, and CLS
Final Thoughts

Why Google Fonts Can Be a Problem for Performance

Fonts can delay page rendering and introduce layout shifts. The main culprits are:

1. Delays in FCP and LCP

External Dependencies: Fetching fonts from Google’s servers adds an extra HTTP request.
Render-Blocking Behavior: Fonts linked via @import or <link> in the <head> can delay page rendering.
FOIT and FOUT: Text can either remain invisible (FOIT) or visibly swap from a fallback font to the custom font (FOUT), impacting both FCP and LCP.

2. Layout Shifts and CLS

Differences in size and line height between fallback and custom fonts often cause layout shifts, resulting in poor CLS scores.

How to Fix Google Fonts for Better FCP, LCP, and CLS

Here’s how to implement Google Fonts efficiently and optimize your website’s performance.

1. Self-Host Your Fonts

Hosting fonts locally gives you control over caching, reduces external dependencies, and improves load times.

Download Fonts: Use a tool like Google Web Fonts Helper to download the font files.
Serve from Your Server: Upload the .woff2 files to a directory like /fonts.

Set Up Your @font-face:

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto-regular.woff2') format('woff2');
    font-display: swap;
}

Combine with Preloading: Preload the font files as described in the next step.

Self-hosting eliminates reliance on external servers, improves load times, and ensures that your fonts are optimized for your needs.

2. Preload Fonts in the `<head>`

Preloading custom font files further reduces delays by instructing the browser to fetch them early, even before parsing the CSS. This approach works especially well for fonts used in above-the-fold content like headers or hero sections.

Preload the .woff2 File: Add a <link> tag in the <head> to preload the font file. Use the as="font" attribute and set the type to font/woff2:
```
<link rel="preload" href="/fonts/roboto-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
```

Define the Font in Your CSS: Combine preloading with your @font-face rule:

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto-regular.woff2') format('woff2');
    font-display: swap;
}

Preloading works hand-in-hand with self-hosting to ensure fonts are fetched early and ready to render when needed, reducing both FCP and LCP.

3. Use `font-display: swap`

font-display: swap ensures text renders immediately with a fallback font while the custom font loads in the background. This avoids FOIT (Flash of Invisible Text) and improves FCP.

Example:

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto-regular.woff2') format('woff2');
    font-display: swap;
}

However, while font-display: swap improves FCP, it can lead to CLS if the fallback and custom fonts differ significantly. To solve this, use size-adjust and ascent-override.

4. Prevent CLS with `size-adjust` and `ascent-override`

When font-display: swap is used, the difference in size, weight, or line height between fallback and custom fonts can cause layout shifts. Fine-tuning the fallback font can eliminate this issue.

Define a Fallback Font: Use size-adjust to scale the fallback font and ascent-override to align the line height:

@font-face {
    font-family: 'Roboto Fallback';
    src: local('Arial');
    size-adjust: 100%;
    ascent-override: 90%;
}

Include It in Your Font Stack:

body {
    font-family: 'Roboto', 'Roboto Fallback', sans-serif;
}

Adjust for Different Weights: For multiple font weights, create separate fallback rules:

@font-face {
    font-family: 'Roboto Fallback';
    src: local('Arial');
    size-adjust: 102%;
    ascent-override: 92%;
    font-weight: 700;
}

@font-face {
    font-family: 'Roboto Fallback';
    src: local('Arial');
    size-adjust: 100%;
    ascent-override: 90%;
    font-weight: 400;
}

This ensures the fallback font is almost identical in size and spacing, preventing layout shifts.

5. Trim the Fat

Load only what you need:

Limit weights and styles (e.g., regular and bold).
Use subsets to reduce file sizes (e.g., Latin-only character sets).
Audit your font usage with tools like Lighthouse to catch unnecessary overhead.

Final Thoughts

By self-hosting fonts, preloading them, and fine-tuning fallback fonts, you can fully enjoy the benefits of Google Fonts without hurting your FCP, LCP, or CLS scores. Fonts are a key part of your design, but with a little extra care in implementation, you can deliver a site that’s fast, visually appealing, and user-friendly.

Good typography shouldn’t come at the expense of great performance. With these strategies, you can have both.