Why self-host
- Speed. Fonts from your own domain skip the extra connections to fonts.googleapis.com and fonts.gstatic.com, and you control caching and preloading.
- No shared-cache benefit anymore. The old argument that visitors already had Google's copy cached no longer holds: browsers now keep a separate cache for each site, so a font cached on one site isn't reused on yours.
- Privacy. Loading fonts from Google sends each visitor's IP address to Google. In January 2022, a regional court in Munich ruled that doing this without consent breached the GDPR (LG München I, 3 O 17493/20). Self-hosted fonts send nothing to anyone.
Step 1: Download the family
On fonts.google.com, open the font and use "Get font", then "Download all". The ZIP contains the font's license (OFL.txt), the TrueType files of every static weight in a static folder, and, for variable families, one or two variable TTF files whose names end in VariableFont_wght.ttf.
Decide which you need. If the family is variable and you use three or more weights, the variable file is usually smaller than the statics together and gives you every weight in between. If you use one or two weights, take just those static files.
Step 2: Subset and compress
Drop the files, or the whole ZIP, into the webfont generator. Remove any styles you don't need, then choose the character sets your site uses. Google itself serves Latin and Latin Extended separately; for most European-language sites, ticking both matches what Google would have sent. If you use a variable file and only need part of the weight range, narrow it under the font.
Then download the kit. It contains the WOFF2 files, a fonts.css with one @font-face rule per style, and a README.
Step 3: Add it to your site
Upload the fonts folder and fonts.css, and link the CSS from your pages, or paste its rules into your own stylesheet:
<link rel="stylesheet" href="/fonts.css">Your existing font-family: "Inter", sans-serif; rules keep working, because the kit uses the same family name.
Step 4: Remove Google's lines
Delete the old tags from your page's <head>, which look like this:
<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=Inter&display=swap" rel="stylesheet">Also search your CSS for @import url("https://fonts.googleapis.com. On WordPress, themes and page builders often load Google Fonts themselves; look in the theme or builder settings for an option to disable them or use local fonts.
Step 5: Preload and check
Add the kit's preload tag for the one or two fonts used above the fold, usually the body text's regular weight. Then reload your site with the browser's developer tools open on the Network tab: you should see your WOFF2 files load from your own domain, and no requests to fonts.googleapis.com or fonts.gstatic.com.
Keep OFL.txt from the download next to your font files. The SIL Open Font License lets you self-host, subset and convert these fonts freely, and asks that the license travel with them. The kit also keeps the license notice inside each font file.