I recently had performance issues on Google Lighthouse due to the fonts used on the website. The Google Fonts I used were classified as a render-blocking resource.

The best way to remove this would have been to revert to a standard web safe font, but I wanted to stick with the Google Fonts. If you hit the same issue here are two ways to help reduce/remove the issue

  1. Call the fonts yourself
  2. Host the fonts yourself

Both seem to work well, if you’re using a lot of fonts/variations hosting them yourself may be the best option, as I was only using three weights of the same font, the first option worked well here.

Call the fonts yourself

By calling the fonts directly you skip the initial call to Google. This website uses three weights of Roboto Slab: 200, 400 and 700.

The code from Google to add the fonts looks like this:

<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=Roboto+Slab:wght@200;400;700&display=swap" rel="stylesheet">

Instead of using the supplied <link> we can skip this call, take the contents, and call it directly in our own CSS file or page <head>. Keep the fonts.gstatic.com preconnect link, this will help with loading the fonts but the fonts.googleapis.com can be removed.

The resulting code will look something like this:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<style>
    /* latin-ext */
    @font-face {
        font-family: 'Roboto Slab';
        font-style: normal;
        font-weight: 200;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/robotoslab/v23/BngMUXZYTXPIvIBgJJSb6ufD5qW54A.woff2) format('woff2');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
        font-family: 'Roboto Slab';
        font-style: normal;
        font-weight: 200;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/robotoslab/v23/BngMUXZYTXPIvIBgJJSb6ufN5qU.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* latin-ext */
    @font-face {
        font-family: 'Roboto Slab';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/robotoslab/v23/BngMUXZYTXPIvIBgJJSb6ufD5qW54A.woff2) format('woff2');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
        font-family: 'Roboto Slab';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/robotoslab/v23/BngMUXZYTXPIvIBgJJSb6ufN5qU.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* latin-ext */
    @font-face {
        font-family: 'Roboto Slab';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/robotoslab/v23/BngMUXZYTXPIvIBgJJSb6ufD5qW54A.woff2) format('woff2');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
        font-family: 'Roboto Slab';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/robotoslab/v23/BngMUXZYTXPIvIBgJJSb6ufN5qU.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    h1, h2, h3, h4, .subtitle, .intro, ul.nav li strong a, div.logo a strong, nav.mainmenu li a {
        font-family: 'Roboto Slab', sans-serif;
    }
</style>

I took the opportunity to remove Cyrillic, Greek and Vietnamese language packs which were automatically included and kept just the Latin and Latin Extended options.

Host the fonts yourself

Another option is to completely skip Google Fonts altogether by downloading the fonts and hosting them on your own website. These step by step instructions from Codeboosh will walk you through the process.

Hello, I'm Keith, a website developer in Belfast, Northern Ireland working with PHP, Magento, Shopify and WordPress.

I've been building websites for over 10 years, from custom website development to bespoke web applications, Shopify and Magento ecommerce and Online Leaning Environments. I've worked on a range of projects and am always looking out for the next interesting project.

Related Notes Posts

Lighthouse and Google Fonts

I recently had performance issues on Google Lighthouse due to the fonts used on the website. The Google Fonts I used were classified as a... July 2022 · Notes

Set-up a Rackspace CDN service

Quick guide for setting-up a CDN on Rackspace. CDN Set-up Log into your Rackspace MyCloud account. Click into Storage > CDN then “Create Service”. In... May 2022 · Notes

Apache VirtualHost with Reverse Proxy

This post documents the process of setting up a reverse proxy to load one (Origin) website in the subdirectory of another. During this process the... August 2021 · Notes

More Notes Posts...