How to Self-Host Google Fonts as WOFF2 Files for Better Web Performance

  • Published: Jun 18, 2026
  • 5-minute read

When I was optimizing this website, I ran into a small tradeoff with Google Fonts.

Loading fonts directly from the Google Fonts API is convenient, but it may raise privacy concerns under the General Data Protection Regulation (GDPR), the European Union’s data privacy and security law. When fonts are loaded remotely through the API, the user’s browser sends requests to Google’s servers, which may include the user’s IP address. This has led to concerns that using Google-hosted fonts without consent could violate GDPR. (See Merane and Stremitzer’s working paper for a discussion of the legal case and its broader impact.1)

For colleagues in Europe, where GDPR is a common consideration, this may be especially relevant. But it is also useful for anyone who wants more control over privacy and web performance.

A common alternative is hosting Google Fonts locally: downloading the font files and serving them from your own website instead of loading them through the Google Fonts API. This avoids remote font requests to Google’s servers, but it can create another problem: the files downloaded directly from Google Fonts are often large and can slow down a website.

The main issue is the font format. When you click Download all on Google Fonts, you usually get TrueType Font (.ttf) files. These work, but they are often much larger than Web Open Font Format 2 (.woff2) files, which are compressed and designed for the web. For example, the .ttf file for Source Sans 3 is 627 KB, while the corresponding .woff2 file is only 27.7 KB. In my case, after I switched from .ttf files to .woff2 files, the PageSpeed Insights performance score of this website increased by more than 10 points.

This also helps explain why the Google Fonts API can be efficient. Google Fonts’ own page on Privacy and Data Collection states that, when fonts are loaded through the Google Fonts API, its servers “automatically send the smallest possible file to every user based on the technologies that their browser supports” and use “WOFF 2.0 compression when available.” In other words, the API can serve optimized web font formats such as .woff2, while the regular download button usually gives you larger .ttf files.

The good news is that, although Google Fonts does not provide .woff2 files through the regular download button, you can still access them from the CSS generated by the embed option and self-host them. Many fonts available through Google Fonts are distributed under open licenses, such as the SIL Open Font License, though it is still a good idea to check the license for the specific font you are using. In many cases, you do not need to load the font through Google’s API; you can download and serve the font files directly from your own website.

How to get the .woff2 files

First, go to Google Fonts, open the page of the font you want to use, and click the Get font button. You will see two options: Get embed code and Download all. The first option gives you the Google Fonts API code, while the second option downloads the larger .ttf files.

Instead of downloading the .ttf files, click Get embed code. In the left panel, choose the weights and styles you need. For example, if your website uses both regular and italic text, make sure both normal and italic styles are included. If you use bold or other font weights, include those weights as well.

In the code chunk labeled Embed code in the <head> of your HTML, you will see HTML code similar to the example below. I use Source Sans 3 as the example here, but the exact code will differ depending on the font you choose.

<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=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">

The important part is the URL in the last line, inside the quotation marks after href=. Copy the URL beginning with https://fonts.googleapis.com/css and open it in your browser. The exact URL depends on the font you choose.

This will open a CSS stylesheet. In that stylesheet, find the @font-face blocks that correspond to the styles, weights, and glyph subsets you need. For example, you may need to download both the normal and italic .woff2 files. If your website uses accented characters or other languages, you may also need additional glyph subsets, such as latin-ext. Each subset is usually labeled in the CSS with comments such as /* latin */ or /* latin-ext */.

For example, to download the normal Source Sans 3 file for the Latin subset, find the @font-face block labeled /* latin */:

/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourcesans3/v19/nwpStKy2OAdR1K-IwhWudF-R3w8aZejZ5HZV8Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

What you need is the URL inside url(...). Copy that URL and open it in your browser. The .woff2 file will download automatically. You can then place this file in your website’s static files folder and load it locally with your own @font-face rule.

By doing this, you can self-host lightweight Google Fonts in .woff2 format while avoiding remote font requests to Google’s servers.

  1. Merane, Jakob, and Alexander Stremitzer. 2025. “Automated Private Enforcement: Evidence from the Google Fonts Case.” doi:10.2139/ssrn.5202414.↩︎

academic website academic websitefontsweb performance