If your website uses Google Fonts, you should consider hosting them locally.
Custom web typography can be challenging, and Google Fonts are an attractive solution: they have a good selection, they’re all free, and it’s easy to select the fonts you want and add them to your site.
Rather than sticking with the standard installation, where your site links to the fonts on Google’s servers, you should consider hosting the fonts locally (for the purposes of this blog post, “locally” means “on the same server as the site itself”).
There are at least two good reasons for doing this.
Why host Google Fonts locally?
Performance
Every font your site requests from Google represents a small performance hit. Your site is loading an asset from somewhere else, and all such web requests take time: time to connect to the other site, and time to fetch and display the asset. If you’ve specified lots of fonts – it takes discipline not to! – each one will cumulatively degrade the performance of your site.
GDPR Compliance
GDP-what-now? The General Data Protection Regulation – GDPR for short – is a key part of European Union (EU) privacy law, and applies to the handling of personal data of EU residents. When used “out of the box,” Google Fonts are not compliant because they track users' IP addresses without their explicit consent.
If your site is used by EU residents, you can address this by presenting a cookie approval banner. This represents additional complexity: the implementation of the banner on your site, and the additional burden to the user of having to read, digest, and trust the cookie banner. You can bypass this concern entirely by hosting your fonts locally.
Implementation
In general terms, you do this by selecting your fonts on Google in the usual way, then downloading and installing them on your site. The procedure is as follows:
- Select your fonts, then click the Download button
- Save the downloaded file .zip file to your computer
- Unpack the .zip file, which will give you a bunch of .ttf (TrueType) files
- Convert these files to .woff2, currently the best format for web typography. I use CloudConvert, which is free.
- Move these files to a known location on your web server
- Add the specifications for each font to your main style sheet, like so:
@font-face {
font-family: 'Font Family Name';
font-display: swap;
font-style: italic;
font-weight: 300;
src: url('/path/to/fonts/font-family-name-v999-latin-300italic.woff2') format('woff2');
}Implementation Details
If you’re using WordPress, you can save yourself some work by using a plugin such as Local Google Fonts or OMGF. I hesitate to recommend a dedicated plugin for this, because the plugin itself will add a small amount of performance overhead and will be one more element to keep up to date, even though you’ll only use it once. But if you’re not comfortable doing the conversion yourself, they can be a good solution.
If you’re already using a plugin with a “self-host Google Fonts” option, such as WP Rocket, it makes sense to let it take care of the fonts.
More information
Tools
- CloudConvert (.ttf -> .woff)