Self host Google fonts for better Core Web Vitals

Self-Hosting Google Fonts for Improved Core Web Vitals

Google Fonts is used on 54% of all websites according to the 2025 Web Almanac. Most of those sites load fonts from Google's servers. That is a problem. Every Google Fonts request adds external connections, render-blocking CSS, and font files that you cannot preload, cache, or control. Self-hosting those same fonts removes all of these issues and takes about 10 minutes.

Last reviewed by Arjen Karel on February 2026

Understanding Core Web Vitals

The Core Web Vitals are three metrics Google uses as ranking signals: LCP (loading), INP (interactivity), and CLS (visual stability). Self-hosting fonts primarily improves LCP and CLS, and can also improve First Contentful Paint (FCP).

Impact of Google Fonts on Core Web Vitals

Google Fonts, often included in web pages to enhance typography and design, can have a significant impact on Core Web Vitals, primarily on the Largest Contentful Paint (LCP) and the Cumulative Layout Shift (CLS).

To most people that I talk to this is new information. The Google CDN is supposed to be the best in the world. So why is Google Fonts bad for page speed?

1. The "shared cache" argument is dead. Many developers still believe that because Google Fonts is so popular, visitors probably have the font cached from another site. That was true before 2020. Since Chrome v86 and Safari (which has done this since 2013), browsers partition their HTTP cache by top-level domain. This means your site downloads Google Fonts from scratch for every new visitor, regardless of which other sites they have visited. The performance benefit of a shared CDN cache no longer exists.

2. The stylesheet is never in the browser cache for new visitors. The first issue with Google Fonts is that it relies on an external stylesheet hosted by fonts.google.com or fonts.googleapis.com. This stylesheet cannot be re-used by different domains (as many people seem to think). This means that the render-blocking stylesheet is never served from the super fast browser cache for first time visitors and will always slow down the rendering of the page.

3. It requires 2 connections to 2 new servers. The second issue is that in order to download the CSS file and the font files we have to connect to 2 different servers. Each initial connection to a new server has serious overhead and takes some extra time. Time, that we could have saved, by serving the files from our already open connection to our server. To avoid this Google advises to preconnect to their domains. That will mitigate the issue a bit but it is still far from perfect

4. You have limited control over the font-display attribute. While Google Fonts does allow you to set the font-display attribute you can only define it globally. This means all woff2 files will get the same font-display setting.

5. The final location of the woff2 file is unknown. This means that we cannot preload our most important fonts. This means that our font files are queued for download relatively late and we will probably get a visible layout shift caused by the flash of unstyled text (FOUT). Read more about how to ensure text remains visible during webfont load.

6. You have no control over the font files. You cannot subset them further, you cannot set long cache headers, and you cannot serve them from your own CDN.

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Advantages of Self-Hosting Google Fonts

Self-hosting Google Fonts involves serving the font files from your own servers instead of relying on external Google servers. This approach can yield several benefits:

1. Improved Font Delivery Speed: Self-hosting fonts reduces the dependency on external servers, leading to faster font delivery and, consequently, quicker rendering of text content. This improvement can positively impact LCP, ensuring that the largest text element becomes visible faster. The 2025 Web Almanac shows that self-hosting is on the rise: 31.5% of desktop sites now exclusively self-host their fonts, up from 28% in 2024.

2. Reduced Layout Shifts: By self-hosting Google Fonts, you can control how the font is loaded and displayed, minimizing the chances of layout shifts caused by delayed font rendering. This helps to improve the overall visual stability of your web page and positively affects CLS.

3. Full control over caching and preloading: When you self-host, you know the exact URL of every font file. That means you can preload critical fonts, set aggressive cache headers (a year or more), and serve fonts from the same connection as the rest of your page.

GDPR compliance

In January 2022, the Munich Regional Court ruled that loading Google Fonts from Google's servers violates GDPR because it transfers visitors' IP addresses to Google without consent. Self-hosting eliminates this issue entirely because no data is sent to Google when the fonts load. If your site has European visitors, this is one more reason to self-host.

Best Practices for Self-Hosting Google Fonts

To optimize your self-hosted Google Fonts for better Core Web Vitals performance, consider implementing the following best practices:

1. Use WOFF2 format only: WOFF2 offers the best compression (about 30% smaller than WOFF) and has 96%+ browser support. The only browser that does not support WOFF2 is Internet Explorer, which reached end-of-life in June 2022. You do not need a WOFF fallback anymore.

2. Font Subsetting: To reduce font file sizes further, consider using font subsetting, which involves including only the characters needed for your web page content. This can lead to faster font loading and improved Core Web Vitals. Google Fonts already subsets by unicode-range, but when self-hosting you can go further with tools like fonttools.

3. Strategic font-display attribute: Configure the font-display attribute strategically to control text rendering during font loading. The "swap" value will speed up the First Contentful Paint by ensuring that fallback fonts are displayed until the web font is fully loaded. The "optional" value will skip the font swap entirely, preventing layout shifts by never replacing the fallback font. A strategic mix of these two will often optimize both the Cumulative Layout Shift and the First Contentful Paint. According to the 2025 Web Almanac, 50% of pages now use font-display: swap, but only 0.5% use font-display: optional, which is the best choice for maximum CWV performance on non-critical fonts.

4. Preload fonts: Ensure fonts are available as early as possible by preloading the most important fonts (1 or 2 maximum) with the link preload mechanism. Always include the crossorigin attribute, even for same-origin fonts, or the browser will download the font twice. Only 12% of pages preload their fonts, so this is an easy win.

<link rel="preload" as="font" href="/fonts/inter-400.woff2" type="font/woff2" crossorigin>

How to self-host a Google font (the right way)

Downloading and self-hosting a Google Font takes about 10 minutes. Keep in mind that you should always review the font's license before using it. Most Google Fonts are available under the SIL Open Font License, which allows free use including commercial use.

The quickest method is to use google-webfonts-helper, which lets you download any Google Font as WOFF2 files with ready-to-use CSS. But if you want to do it manually to understand exactly what is happening, follow these steps:

1. Go to the Google Fonts website at fonts.google.com.

2. Select the font that you want to use and choose the font weights that you wish to include.

3. On the font page, on the top bar click the 'selected families button'. There you will find the link to the Google hosted stylesheet.

   

4. Copy the URL of this stylesheet and open it in your browser. You will now see all the font-face declarations available for the font.

   

5. You might notice that there is more than 1 woff2 file even though we only used one font file. That is because there is a different font file for different unicode ranges. To learn which fonts we should download you should temporarily add the Google hosted stylesheet to your website. Use the shortcut Ctrl-Shift-I to open your Chrome DevTools. Navigate to the network tab and click Font. Now refresh the page (Ctrl-R) to see which font is triggered for download.

6. Match this font file name to the corresponding woff2 file in the stylesheet. Now you know which font file is used for your website!

7. The next step is to copy the full font URL and open that in your browser. This will trigger a download for this font file. Copy this file to your website.

8. Copy the CSS for the used webfont in step 7 and paste it in your stylesheet. Don't forget to change the URL from the Google CDN to your own server (for example '/fonts/inter-400.woff2').

9. Preload the font (if it is a visually important font).

Now you have successfully downloaded and self-hosted the Google Font of your choice.

A real life example

Here is a complete example using the Inter font with all the best practices applied: preloading, WOFF2 only, a strategic font-display value, and a system font fallback.

<head>
  <title>Self-Hosted Google Fonts</title>
  <!-- preload the font (crossorigin is required, even for same-origin fonts) -->
  <link rel="preload" as="font" href="/fonts/inter-400.woff2" type="font/woff2" crossorigin>
  <style>
    /* Self-hosted Inter font with WOFF2 format */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      src: url('/fonts/inter-400.woff2') format('woff2');
      font-display: optional;
    }

    /* Fallback to system-ui font */
    body {
      font-family: 'Inter', system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This page uses Inter with a system-ui fallback.</p>
</body>

Monitor the impact

After switching to self-hosted fonts, verify the improvement with Real User Monitoring. In our CoreDash data, sites that self-host their fonts with proper preloading see a median LCP improvement of 180ms compared to loading from the Google Fonts CDN. Track your LCP, CLS, and FCP over time to make sure the change is working.