How to self-host Google Fonts as WOFF2 (and make them smaller)

Self-hosting Google Fonts means serving the font files from your own domain instead of from fonts.googleapis.com. It removes two third-party connections from every page load, avoids sending visitors’ IP addresses to Google, and, if you subset the fonts to WOFF2, usually makes them much smaller. It takes about ten minutes. Here’s how.

Why self-host Google Fonts?

• Speed. The standard Google Fonts embed makes the browser connect to two extra servers, fonts.googleapis.com for the CSS and fonts.gstatic.com for the files, before any text can render in your font. Self-hosted fonts come over the connection your page already has open.
• The shared cache is gone. The old argument for the Google CDN was that visitors probably had the font cached from another site. Browsers now partition their cache by site (Safari for years, Chrome since version 86 in 2020, Firefox since version 85 in 2021), so a font cached on one site is downloaded again on yours anyway.
• Privacy. Loading fonts from Google sends each visitor’s IP address to Google. In January 2022 a Munich court (LG München I) ruled that embedding Google Fonts this way without consent breached the GDPR and awarded a visitor €100 in damages. Self-hosting removes the issue entirely.
• Control. You decide the exact files, the caching headers and which characters are included.

Are you allowed to self-host Google Fonts?

Yes. Nearly every family on Google Fonts is released under the SIL Open Font License, and the rest under the Apache License or the Ubuntu Font Licence. All of them allow you to host, convert and subset the fonts on your own site. The OFL’s one main condition is that a modified version can’t be distributed under the original font’s reserved name, which doesn’t affect serving subset files on a website.

Step 1: Download the font files

Open the family on fonts.google.com, choose Get font, then Download all. The ZIP contains TTF files: usually a variable font, which covers every weight in one file, plus a static folder with one file per weight and style.

Use the static files if you only need two or three weights; that’s also what the subsetting below works on. If you need many weights, the variable font can be cheaper overall (see the FAQ at the end).

Step 2: Convert to WOFF2 and subset

TTF is not compressed for the web. WOFF2 wraps the same outlines with Brotli compression and is supported by every current browser, so it’s the only format you need to serve.

The bigger saving is subsetting: removing glyphs your site never uses. A font that covers Latin, Cyrillic, Greek and Vietnamese may be several hundred kilobytes; cut to the Latin characters an English site uses, it’s often 15–30 KB.

1. Open the font compressor and drop in the TTF files. It runs in your browser.
2. Keep the default Latin set, pick extra scripts if your site needs them, or paste your site’s text to keep exactly the characters it uses.
3. Download the WOFF2 files.

Two things to know about subsetting:

• Coverage. If a character is cut and later appears in your content, a name with an accent or a currency symbol, the browser draws it in a fallback font. For a site whose text changes, a full Latin subset is the safe choice.
• Kerning and ligatures. Our compressor keeps every glyph’s shape exactly, but when it subsets it drops the kerning and ligature tables, so spacing between some letter pairs (such as “AV” or “To”) can open up slightly. In body text it’s rarely noticeable; for large display headings, compare the result with the original before you ship it.

Step 3: Add the @font-face rules

Put the WOFF2 files in a folder on your site, for example /fonts/, and declare each one in your CSS:

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-700.woff2') format('woff2');
}

body { font-family: 'Inter', system-ui, sans-serif; }

For a variable font, declare one rule with a weight range such as font-weight: 100 900; instead.

font-display: swap shows text in a fallback font straight away and swaps in your font when it arrives, so text is never invisible while it loads.

If you split a font by script, add a unicode-range to each rule so the browser downloads only the files for characters that actually appear on the page. That’s exactly how Google Fonts serves them.

Step 4: Preload the most important font

Fonts are discovered late, only after the CSS is parsed. Preloading the one or two files used above the fold starts the download immediately:

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

The crossorigin attribute is required even for your own domain; without it the browser fetches the font twice. Don’t preload every weight: each preload competes with your images and CSS.

Step 5: Remove the Google Fonts embed and cache the files

Delete the <link> tags pointing to fonts.googleapis.com and fonts.gstatic.com (or the @import in your CSS). Then serve the font files with a long cache lifetime, for example Cache-Control: public, max-age=31536000, immutable, and change the file name when you update a font.

Finally, open your site with the browser’s developer tools on the Network tab and filter by “Font”: you should see only your own WOFF2 files, each loaded once.

What to expect

This site does exactly this. Its main typeface is served as two self-hosted WOFF2 subsets, Latin at 27 KB and Latin Extended at 22 KB, and the second is only downloaded on a page that uses one of its characters. There are no requests to any font CDN.

Frequently asked questions

Is self-hosting Google Fonts faster?

Usually, yes. It removes the connections to two Google servers, and since browsers no longer share cached files between sites, the Google CDN has no caching advantage left.

Is using Google Fonts GDPR compliant?

Loading them from Google’s servers transfers visitors’ IP addresses to Google, which a German court found unlawful without consent in 2022. Self-hosting avoids the transfer. This isn’t legal advice; check with your own adviser.

Which font format should I use: WOFF2, WOFF or TTF?

WOFF2 only. Every current browser supports it and it’s the smallest. WOFF and TTF fallbacks are only needed for very old browsers.

Can I self-host a variable font?

Yes. It needs a converter that keeps the variation data, such as Google’s woff2_compress or fontTools; our compressor is built for static fonts. Declare it with a weight range, such as font-weight: 100 900. One variable file is often smaller than three or more static weights.

Do I need to keep the licence file?

It’s good practice to keep the OFL licence text alongside the font files in your project. Serving the fonts on a website is permitted.