The usual way to use a Google Font is to paste a <link> to fonts.googleapis.com into your page. It works, and it's free. But every visitor gets sent to Google's servers before your text can show up in the right typeface, and there are good reasons to stop doing that.
Self-hosting means downloading the font files and serving them from your own site. It takes about fifteen minutes, and you only do it once.
Why self-host
It's usually faster
A Google Fonts link makes the browser connect to two more domains: fonts.googleapis.com for the CSS, then fonts.gstatic.com for the font files. Each new connection costs time on a slow mobile network. And the browser doesn't even know which font files it needs until the CSS arrives.
The old argument for Google Fonts was caching: a visitor might already have the font from another site. That's no longer true. Safari, Chrome and Firefox now keep a separate cache for each site (Firefox was the last to switch, in early 2021), so a font downloaded on one site gets downloaded again on yours.
Font files on your own domain reuse the connection the browser already has open, and you can preload the important one so it arrives as early as possible.
It keeps visitor data away from Google
Every request to Google Fonts sends the visitor's IP address to Google. In January 2022, the Munich Regional Court ordered a website owner to pay a visitor 100 euros in damages for exactly that: sending their IP address to Google without consent (case 3 O 17493/20). The court's reasoning was that the site didn't need Google to display the font, since it could have hosted the font itself.
This isn't legal advice, but if you have visitors in Europe, self-hosting takes the question off the table.
Is self-hosting allowed?
Yes. Nearly every font on Google Fonts uses the SIL Open Font License, and the rest use similar open licenses like the Apache License. All of them let you download the font, host it yourself, and subset or convert it. Each download includes the license file, and the font's page on Google Fonts shows which license applies.
Step 1: download the font
Open the font's page on fonts.google.com, choose Get font, then Download all. You'll get a zip with the font as TTF files.
Many families include a variable font, one file that covers every weight. If you use three or more weights, the variable file is usually the better pick. If you only use regular and bold, two static files can come out smaller.
Step 2: subset it and convert to WOFF2
Don't upload the TTF files as they are. They contain every character the designer drew, Greek, Cyrillic and Vietnamese included, and TTF isn't compressed for the web. A Google Font straight from the download can easily run to several hundred kilobytes.
The font subsetter fixes both problems:
- Drop the TTF file into the subsetter.
- Select the character sets you need. For an English site, Basic Latin and Latin-1 are usually enough. Add Latin Extended if you publish names or words with other accents.
- Keep the standard OpenType features so kerning and ligatures still work.
- Download the WOFF2 file and copy the
@font-faceCSS it writes.
Subsetting plus WOFF2 compression routinely cuts a font by 70 to 90 percent, and the font never leaves your device while you do it.
Step 3: upload the files and add @font-face
Upload the WOFF2 files to your site, for example to a fonts folder in your theme. Then add @font-face rules to your stylesheet. For a variable font covering weights 100 to 900, it looks like this:
@font-face {
font-family: "Inter";
src: url("/fonts/inter-latin.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
body {
font-family: "Inter", system-ui, sans-serif;
}font-display: swap shows your text in a fallback font right away and swaps yours in when it arrives, instead of hiding the text while it loads. unicode-range tells the browser which characters the file covers. Use the range the subsetter gives you.
For static files, write one @font-face rule per file, each with a single font-weight such as 400 or 700.
Step 4: preload the main font file
Browsers find fonts late, after the CSS has loaded and the page is laid out. A preload hint in the <head> starts the download immediately:
<link rel="preload" href="/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin>Keep crossorigin even though the file is on your own domain. Fonts are always fetched in CORS mode, and without the attribute the browser downloads the font twice. Only preload the one or two files used at the top of the page. Preload everything and the important files end up waiting.
Step 5: remove the Google Fonts link
Now delete the <link> to fonts.googleapis.com. Check your theme and plugins too, since many load Google Fonts on their own. Look for a setting like "Load Google Fonts locally" or "Disable Google Fonts".
To make sure nothing's left, open Chrome DevTools, go to the Network tab, reload the page and type gstatic into the filter box. If nothing shows up, no font is coming from Google.
On WordPress
If you use a block theme on WordPress 6.5 or later, go to Appearance, then Editor, then Styles, then Typography, and open Manage fonts. In the Install fonts tab, allow access to Google Fonts and install the family you want. WordPress downloads the files to your own site, so visitors never contact Google. The files aren't subset, though, so for the smallest result, upload the WOFF2 files you made in step 2 instead.
The other route works with any theme. Put your WOFF2 files and a small stylesheet with the @font-face rules in your theme or child theme, and load the stylesheet as usual. Then add the preload line from step 4 to the <head>.
Either way, make sure the theme isn't still loading the font from Google too. This site self-hosts its Inter font the same way, subset to Latin and preloaded.
Check that it worked
In the DevTools Network tab, click the Font filter and reload. Every font should come from your own domain as a WOFF2 file. Then run PageSpeed Insights. Google Fonts shouldn't appear among the third parties anymore, and the Font display insight should be clear.