Self-Hosting Google Fonts: Download, Convert, Deploy

Google Fonts is the most convenient way to use quality open-source typefaces on the web — one line of HTML and your font is loading. But "loading from Google" means every page view sends a request to Google's CDN, including the visitor's IP address. In the EU, that's a GDPR consideration. German courts have already ruled that embedding Google Fonts via remote CDN without explicit consent violates GDPR.

The solution is self-hosting: download the font files, convert them to the right formats, and serve them from your own domain. Google Fonts are all licensed under OFL or Apache 2.0 — self-hosting is completely legal and the license explicitly permits it.

This guide walks through the full process.

Reasons to Self-Host Instead of Using the Google CDN

GDPR / privacy compliance: Loading fonts from Google's CDN is a third-party request. Google receives the visitor's IP address, browser, and referrer. Under GDPR, this typically requires disclosure and may require consent. Self-hosting eliminates the third-party request entirely.

Performance: Google's font CDN is fast, but it still requires a separate DNS lookup, TCP connection, and potentially a TLS handshake to a different origin. For well-optimized sites, eliminating that external request removes latency. Self-hosted fonts also benefit from your server's existing HTTP/2 connection with the browser.

Control: Google has occasionally updated font files, changing metrics or adding glyphs between visits. Self-hosted fonts are pinned — the version doesn't change unless you update it.

Availability: If Google's CDN has an outage or is blocked in a specific region (China, for example, blocks many Google services), your fonts still load. Self-hosted fonts are as available as your own server.

Step 1: Download the Font Files from Google Fonts

Go to fonts.google.com, find the font family you want, and click the download icon (top right of the family page). This downloads a ZIP containing the font files — typically TTF format for variable fonts and individual weight TTFs for static families.

Unzip to a working folder. You'll see one or more .ttf files — one per weight/style combination for static fonts (e.g., Inter-Regular.ttf, Inter-Bold.ttf, Inter-Italic.ttf), or a single variable font file for families like Inter or Roboto Flex.

Keep only the weights and styles you'll actually use. Serving unused font weights wastes bandwidth.

Sell Custom Apparel — We Handle Printing & Free Shipping

Step 2: Convert TTF Files to WOFF and WOFF2

For a web font deployment, you want WOFF2 as the primary format and WOFF as a fallback. Modern browsers use WOFF2; the WOFF fallback covers edge cases.

Browser converter for WOFF: Open the font converter, drop each TTF, select WOFF, download. Repeat for each weight and style. This takes about a minute for a typical family with 3–5 weights.

fonttools for WOFF2 (and batch WOFF if preferred):

pip install fonttools brotli
# Convert one file
python3 -m fonttools ttLib.woff2 compress Inter-Regular.ttf
# Batch convert all TTFs in the folder
for f in *.ttf; do
  python3 -m fonttools ttLib.woff2 compress "$f"
done

After both steps, you should have matching pairs: Inter-Regular.woff and Inter-Regular.woff2, Inter-Bold.woff and Inter-Bold.woff2, and so on.

Step 3: Upload the Files and Write Your @font-face CSS

Create a /fonts/ directory on your server and upload all the WOFF and WOFF2 files. Then write the @font-face declarations in your CSS:

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

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

font-display: swap tells the browser to show a fallback font immediately and swap in the web font once it loads — preventing invisible text during the load window.

Remove any existing Google Fonts <link> tags from your HTML. Your fonts now serve entirely from your domain.

Caching and Performance Tips for Self-Hosted Fonts

Self-hosted fonts benefit from your server's existing caching configuration. Set a long cache TTL for font files — they rarely change once deployed:

# nginx
location ~* .(woff2|woff|ttf|otf)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

Also add a <link rel="preload"> for your primary font weight in the HTML <head> to start the font download early:

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

Preloading the regular weight (the first weight browsers need to render body text) typically reduces the time to visible text by 100–300ms on first page load.

Frequently Asked Questions

Is self-hosting Google Fonts legal?

Yes. All Google Fonts use OFL 1.1 or Apache 2.0 licenses, both of which explicitly permit copying, modifying, and redistributing the fonts, including self-hosting on a web server.

Does self-hosting Google Fonts improve performance?

It can. Self-hosting eliminates a separate DNS lookup and TCP connection to Google's CDN, and the fonts benefit from your server's existing HTTP/2 connection. The performance gain varies — for sites already optimized, it's modest. The privacy and compliance benefit is more consistent.

Do I need both WOFF and WOFF2 for self-hosted fonts?

For maximum browser compatibility, yes. Modern browsers (covering 95%+ of traffic) use WOFF2. The WOFF fallback covers older browsers. List WOFF2 first in the @font-face src so modern browsers use it; older browsers fall back to WOFF automatically.