How to Self-Host Google Fonts on Your Own Server

Google recommends that you use the code that they supply for using Google Fonts on a website in their FAQ, but if you want full control of the fonts being displayed, self-hosting Google Fonts on your own server is an option.

Why Self-Host Google Fonts

One might expect that the font shown on a website using Google Fonts won't change after picking out the font, however it can change without your knowledge. Because Google serves the latest version of a font, at any time the font might change to a new version without any notice (example of an issue where this happened). I doubt there would be a drastic change, but it's possible that there might be a change to the font served by Google that you don't like.

Performance is another reason why developers self-host Google Fonts, however some developers say self-hosting Google Fonts is faster and some say it's not. On the one hand, you have Google's optimized servers in locations all around the world and on the other hand, you have less trips to a third party server. That's simplifying it a bit, but maybe it's one of those things you have to test for yourself.

In my case, I tried self-hosting a Google Font to help resolve a FOUT (Flash of Unstyled Text) issue that was happening when loading my website with Edge. It didn't fix my problem, but I'm glad I learned how to self-host Google Fonts while trying to fix it.

Where to Get Google Fonts for Self-Hosting

The fonts you find at fonts.google.com will have a download button that lets you download the font, but you'll only get font files with the .ttf extension. For modern browsers, you'll likely want the .woff2 and .woff versions of the font which use compression and are likely to load faster. You can get the .woff and .woff2 versions of Google Fonts from google-webfonts-helper.herokuapp.com which is not an official Google site, but is linked to from the google/fonts GitHub Repository README as a place to go for help with self hosting.

Steps for Self-Hosting Google Fonts

Note: Before self-hosting a font, it's a good idea to read the font license and make sure you can follow license requirements for the font. See "Take Care to Follow the Font License" below.

• Go to google-webfonts-helper and select the font you'd like to download.
• Under "Copy CSS" choose "Modern Browsers" for supporting current browsers that use .woff and .woff2 or "Best Support" if you want to support older browsers too.
  • See CSS-Tricks - Using @font-face which is mentioned on the google-webfonts-helper site if you need help determining which one to choose and how to customize the @fontface block to match your site's level of support.
• Copy the CSS given for the font and add it to the appropriate stylesheet for your site.
  • You can add the font-display property to the @font-face block if desired to help control FOUT (Flash of Unstyled Text) and FOIT (Flash of Invisible Text) on browsers that support it (see font-display for the masses if you're unfamiliar with font-display and caniuse.com for CSS font-rendering controls for info on browser support). Note that IE and Edge are among the browsers that don't support it.
• Under "Download files" click the button to download the font's zip file and then extract the files and add them to your project.

Take Care to Follow the Font License

Note: This is information I've found about Google Font licenses that I hope will be helpful, but I'm not a lawyer and this isn't legal advice. You should read the font license information yourself since you're responsible for following it.

When you download files from google-webfonts-helper, it doesn't include a text document with the font license. Below the download button, it says "See Google Fonts Open Source Font Attribution to find out the specific license that this font uses." That link isn't to the actual text document license for the font, so I looked deeper to find one.

According to the google/fonts repo, it has a license in the directory for each font family, so you may want to find the license for your font in this repo and read it. I did, and it made me want to add a copy of that license in the directory with the font I was using.

Example

Since I was looking for the Quattrocento Sans font which uses the SIL Open Font License, I found the license text file under ofl/quattrocentosans in the google/fonts repo. The license file is named OFL.txt and has copyright info for this particular font at the top.

I read the license and one thing it says is this

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

Since I was going to put the font in a GitHub repo, that probably counts as redistribution, so I put a copy of the font's license file, OFL.txt, in the directory with the fonts in my repo.

Summary

Self-Hosting Google Fonts may not be for everyone, but if you really care about a font never changing to a new version without your knowledge, then it may be the way to go. If you want to self-host Google Fonts to make your site faster, you may need to do some tests to see if it really is faster.

Whatever your reason for self-hosting Google Fonts, you can download them from google-webfonts-helper (unofficial site) and follow the steps to add them to your site. It's also a good idea to read and follow the license for the fonts used.