5 Tips To Make Google Fonts Faster
Tags: webdev, performance, webperf, googlefonts
Published: 2022-05-31 16:56:24

---
title: 5 Tips To Make Google Fonts Faster
published: true
date: 2022-05-31 08:00:00 UTC
tags: webdev, performance, webperf, googlefonts
canonical_url: https://requestmetrics.com/web-performance/5-tips-to-make-google-fonts-faster
cover_image: https://requestmetrics.com/assets/images/webperf/google-fonts/google-fonts-teaser-2000.png
---

Google Fonts is a fantastic tool for web designers and developers, but it is sometimes one of the slowest resources on your website. It’s frustrating and ironic that Google’s own font service is the long pole in so many web performance reports, but it doesn’t have to be! Here’s 5 ways to supercharge your install of Google Fonts to make it download less, load faster, and reduce [layout shifts](https://requestmetrics.com/web-performance/cumulative-layout-shift) of your website.

<!--more-->
## Tip 1. Use Fewer Fonts

The old performance adage of “do fewer things” always applies. If you use fewer fonts, then obviously they will load faster, duh! Most websites should be able to use one or two fonts: a base font and a header or accent font.

Try to keep your design as simple as possible. If you think you need 3 or more fonts, consider whether that is worth a site that loads in 4 seconds instead of 2.

### Load Fonts When You Need Them

You don’t always need all the fonts on every page of your website. For example, we use a base font and a header font on most of our pages, and then a separate “content font” on long-form text like this. Every page will load our base and header font, but _only_ content pages load the content font. That saves about 30 kB and 50 ms from our base load time on most pages.

We do this in [Jekyll](https://jekyllrb.com/) by having 2 Google Font tags and conditionally loading the content fonts with a frontmatter variable.

```markdown

---
layout: web-performance-post
title: "5 Ways To Make Google Fonts Faster"
content_fonts: true
---

```
_Post frontmatter that uses content fonts_

```html

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&Muli:wght@400;700&display=swap" rel="stylesheet">
{% if page.content_fonts %}
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;400i;700&display=swap" rel="stylesheet">
{% endif %}

```
_Global head that conditionally loads content fonts_

### Limit Font Weights

Even if you are only using a few fonts, they could be very large and slow if you are downloading every possible variation and weight of the font. For example, if your site uses the popular [Roboto font](https://fonts.google.com/specimen/Roboto), it takes an additional 30 ms and 11 kB for each font variation you use. If you blindly select _all of them_, this can add up quick.

![Network Cost of loading all Roboto Font Weights](https://requestmetrics.com/assets/images/webperf/google-fonts/roboto-font-loads.png)

Each weight is further doubled if you also need it in _italics_.

## Tip 2. Specify the Font Text

Typically, Google Font’s doesn’t know what you are going to show in your fancy font. So it has to send _everything_. Literally every character in every alphabet, just in case you want to use it. What a waste of bytes!

For most sites, we only need the font for characters in one alphabet. And sometimes, we’re only need to show a few headline words. The [Google Fonts CSS2 API](https://developers.google.com/fonts/docs/css2) supports a `text` parameter where we can provide the list of characters we intend to use, and it will shrink down the response for us.

For example, an entire weight of the Roboto font is about 11 kB. But if we restrict to to just the basic Latin alphabet, numbers, and common punctuation, it’s cut almost in half to 6 kB.

```html

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap
&text=1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%20%21%22%23%24%25%26%27"
rel="stylesheet">

```
_Limiting the Roboto Font to base characters_

If you are only using a font for a headline hero message, you can get even smaller! Setting `text=5 Ways To Make Google Fonts Faster` results in only a 2 kB font!

## Tip 3. Bypass Google’s Font Loader

Google Fonts works as a 2-step request process. The first request is the link tag to `https://fonts.googleapis.com/css2` that you include on your page with your desired fonts. This is the font loader, a CSS file with all the font definitions you asked for. Once this request is complete, a second series of requests is made for each font used.

That’s two, serial, and blocking requests that can slow down the rendering of your content.

You can speed this up by including the CSS font definitions directly in your own CSS. Here’s how:

1. Place the `<link>` tag on your page for your Google Fonts, specifying the fonts, weights, and text that you need.

2. Open up Chrome DevTools and look at the results of that css request. It will be a CSS file that looks something like this:

```css

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/l/font?kit=KFOmCnqEu92Fr1Me4GZNCzcPbOHTt6tqXl2TMWgtUADtbNE0FwjR60ub0BtuliV9nzY5opeRF6O-FnZsaJLetvV-9mXgaxv7xBV8jmt2chWZ7OuZw6siU4A&skey=a0a0114a1dcab3ac&v=v30') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/l/font?kit=KFOlCnqEu92Fr1MmWUlvBh0_IsHA06hvWViQJH84UwXqadI5GH6rkU6c1RhjmSh-mjE8oYqOCqC7EXNvZZ3Tj85H82LlaBb0yRZ5iW51bwqE7-6exqgvXI1IEVo&skey=c06e7213f788649e&v=v30') format('woff2');
}

```
_Google's Font Loader Response_

1. Copy the text into your site’s CSS. We use SASS and have a `_fonts.scss` file that we include just for this purpose. _Note: If you did not limit the text characters in your font request, you’ll see a lot of `@font-face` definitions. You only need to copy the character sets you’ll need. For us, that’s just the Latin characters._

2. Remove the Google Fonts `<link>` tag from step 1. You’re now referencing the font files directly from your CSS and skipping the loading request entirely.

### Text Visibility During Font Load

Make sure to keep the `font-display` property! This directive tells the browser [whether to show or hide your text](https://web.dev/font-display/) while waiting for fonts to load. If you show text too early, it can cause a nasty [layout shift](/web-performance/cumulative-layout-shift) when the fonts are all replaced.

### Checking for Local Fonts

You may be using a font that the end user already has installed on their computer. Wouldn’t it be great if you could just use that local font and skip the request entirely? Well you can!

The `src` directive allows you to specify multiple values, which allows us to make an attempt to reference a local font before hitting the URL.

```css

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), url('https://fonts.gstatic.com/l/font?kit=KFOmCnqEu92Fr1Me4GZNCzcPbOHTt6tqXl2TMWgtUADtbNE0FwjR60ub0BtuliV9nzY5opeRF6O-FnZsaJLetvV-9mXgaxv7xBV8jmt2chWZ7OuZw6siU4A&skey=a0a0114a1dcab3ac&v=v30') format('woff2');
}

```
_Font Directive with local attempt_

## Tip 4. Preloading Fonts

In the last tip, you removed a serial loading step in getting your fonts. But you are still waiting for your own CSS files to be downloaded and parsed before the browser knows where to find your fonts. You can skip this step too with **preloading**.

You can instruct the browser to begin loading your fonts before it knows how to use them by adding a special `<link>` tag to the `<head>` of your page, one for each font you are loading:

```html

<link rel="preload" href="https://fonts.gstatic.com/l/font?kit=KFOmCnqEu92Fr1Me4GZNCzcPbOHTt6tqXl2TMWgtUADtbNE0FwjR60ub0BtuliV9nzY5opeRF6O-FnZsaJLetvV-9mXgaxv7xBV8jmt2chWZ7OuZw6siU4A&skey=a0a0114a1dcab3ac&v=v30"
    as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/l/font?kit=KFOlCnqEu92Fr1MmWUlvBh0_IsHA06hvWViQJH84UwXqadI5GH6rkU6c1RhjmSh-mjE8oYqOCqC7EXNvZZ3Tj85H82LlaBb0yRZ5iW51bwqE7-6exqgvXI1IEVo&skey=c06e7213f788649e&v=v30"
  as="font" type="font/woff2" crossorigin>

```
_Preloading the Roboto Fonts_

Each of the preloading tags contains the specific font URL we copied earlier, that the browser should load it `as` a font, and that the `type` of the font file is `woff2`. Depending which fonts you use, the types may change, so be sure to check what is in the `format` part of the CSS definition.

## Tip 5. Host Your Own Fonts

The connection to Google Fonts itself could be slowing down your website. Not that Google’s services are slow, but it is another connection, another DNS lookup, and another SSL handshake that needs to happen to load your page.

If your website host is already fast, hosting the font files directly can further speed things up by skipping all the connection setup steps to Google Fonts. Simply download the font files from the URLs and save them into your website. Then, update the URLs to match your local paths.

```css

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), url('https://yoursite.com/fonts/roboto-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Roboto'), url('https://yoursite.com/fonts/roboto-700.woff2') format('woff2');
}

```
_Font Directives from your website host_

Remember to change the preload URLs as well!

```html

<link rel="preload" href="https://yoursite.com/fonts/roboto-400.woff2" as="font" type="font/woff2">
<link rel="preload" href="https://yoursite.com/fonts/roboto-700.woff2" as="font" type="font/woff2">

```
_Preloading the Roboto Fonts from your host_

_Note: If your web host is not fast, and does not support HTTP/2, this might end up slowing things down. In older versions of HTTP, each request required its own setup, and your server is probably not as fast as Google’s._

## Just How Fast Is It?

We made these changes to RequestMetrics.com a few weeks ago and the performance benefits were real and significant. Firstly, check out this Lighthouse Score.

 ![Google Font Improvements to Lighthouse Scores](https://requestmetrics.com/assets/images/webperf/google-fonts/lighthouse-improvement.png)
_Google Font Improvements to Lighthouse Scores_

That’s cool and all, but as we’ve talked about before, [Lighthouse can lie to you](https://requestmetrics.com/web-performance/the-limitations-of-lighthouse). We’re a _real user_ performance monitoring company. What’s the _real user_ benefit?

 ![Google Font Improvements to Real Page Loads](https://requestmetrics.com/assets/images/webperf/google-fonts/page-load-improvement.png)
_Google Font Improvements to Real Page Loads_

Applying these changes to fonts dropped our Median user load time from 2.2 seconds to 1.9 seconds. The 95th percentile fell from 8 seconds to 5 seconds.

 ![Google Font Improvements to Real First-Contentful Paint](https://requestmetrics.com/assets/images/webperf/google-fonts/fcp-improvement.png)
_Google Font Improvements to Real First-Contentful Paint_

We see these same improvements in our [Core Web Vital](https://requestmetrics.com/core-web-vitals) metrics, with significant drops to our First Contentful Paint score.

* * *

With some consideration to your font choices and simple tweaks to how you install Google Fonts into your website, you can greatly improve the load performance for your users. Don’t take our word for it though, check out your [real user performance data with Request Metrics](https://app.requestmetrics.com/signup) and see how much faster it gets.