How to Self-Host Google Fonts (Faster, GDPR-Safe) in 5 Minutes

Loading fonts from fonts.googleapis.com is convenient, but it adds two third-party connections and, since a 2022 German court ruling, is a GDPR concern in the EU. Self-hosting removes both problems and is usually faster. Here is the whole process.

Step 1: download woff2 files

Open the font's page in the font library (for example Inter) and click the ZIP download. It contains woff2, woff and ttf files per weight, generated by the google-webfonts-helper service. You only need woff2 for modern browsers.

Step 2: write @font-face

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-v20-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/inter-v20-latin-700.woff2") format("woff2");
}
body { font-family: "Inter", system-ui, sans-serif; }

Step 3: preload the critical weight

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

Preload only the one or two files used above the fold; preloading everything delays other resources.

Step 4: use a variable font when available

Many families (Inter, Roboto Flex, Manrope, DM Sans) ship a single variable woff2 covering all weights, typically 100 to 300 KB. Declare font-weight: 100 900; in one @font-face and use any weight.

Step 5: subset

If your site is English-only, the "latin" subset is enough (about 20 to 40 KB per weight). For multilingual sites, add unicode-range descriptors per subset so browsers download only what the page needs, exactly what Google's CSS does.

Step 6: cache headers

Serve fonts with Cache-Control: public, max-age=31536000, immutable and version the filenames. Make sure the server sends Access-Control-Allow-Origin if fonts live on a different subdomain or CDN.

Frameworks

• Next.js: next/font/google downloads and self-hosts automatically at build time.
• Nuxt: @nuxt/fonts does the same.
• WordPress: plugins like OMGF replace Google Fonts requests with local copies.

Licensing

All Google Fonts are OFL or Apache licensed, which explicitly permits redistribution and self-hosting. Keep the license file next to the fonts. Details in the open license guide.