How to Self-Host Google Fonts on Your Own Server
Tags: fonts, googlefonts, webdev, beginners
Published: 2019-02-19 01:55:40

---
title: How to Self-Host Google Fonts on Your Own Server
published: true
description: Self-hosting Google Fonts is an option if you want full control over your fonts, with perhaps the most compelling reason being that fonts can be upgraded to newer versions that look different without your knowledge. 
tags: fonts, google fonts, webdev, beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/hkfztagb0f3yfawqn2w2.jpg
---


Google recommends that you use the code that they supply for using Google Fonts on a website in their [FAQ](https://developers.google.com/fonts/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](https://github.com/google/fonts/issues/1307)). 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](https://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](https://google-webfonts-helper.herokuapp.com) which is not an official Google site, but is linked to from the [google/fonts GitHub Repository README](https://github.com/google/fonts) 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](https://google-webfonts-helper.herokuapp.com)  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](https://css-tricks.com/snippets/css/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](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/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](https://css-tricks.com/font-display-masses/) if you're unfamiliar with `font-display` and [caniuse.com for CSS font-rendering controls](https://caniuse.com/#feat=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](https://google-webfonts-helper.herokuapp.com), it doesn't include a text document with the font license. Below the download button, it says "See [Google Fonts Open Source Font Attribution](https://fonts.google.com/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](https://github.com/google/fonts), 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](https://github.com/google/fonts). 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](https://google-webfonts-helper.herokuapp.com) (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.