Self Hosting Google Fonts

A lot of web developers prefer to host Google Fonts on their own servers, that way they have more control over the actual font files.

Google Fonts does give you the option to download the font files, but they are only in .ttf format. This means that you need to use a web font maker to get the other necessary formats. Google also doesn’t give you the @font-face declarations for your CSS, although you can technically get them from their css file itself.

An Easier Way: Google Webfonts Helper

Google Webfonts Helper is a free tool created by Mario Ranftl that does all the hard work for us. It uses the Google Fonts API to do everything I just mentioned above.

Let’s go through the four super easy steps for self hosting Google Fonts, using the Google Webfonts Helper tool.

1. Choose Your Font

Go to the Google Webfonts Helper website and choose your font. You can also quickly find it by typing in the search box at the top left corner. We’re choosing a font called “Alegreya”.

A screenshot of the search input that helps you find you font

Now that you’ve found the font you want, you can choose the different variations of it. We want the regular, italic, 700 and 700 italic ones.

2. Choose Browser Support

Right before the code, you have two options for browser support; Best Support or Modern Browsers. Best Support gives you just that, more support for older browsers. Modern Browsers gives you support for modern browsers only. The default is Best Support, which is most probably what we need.

A screenshot that shows the two browser support options for your font
3. Copy The CSS

After you choose your browser support option, scroll a little bit down, right beneath the code. There is an option to customize our fonts’ directory/folder. By default it is set to ../fonts/. This means that their CSS file is inside a directory as well. In our example, however, the CSS is not in a folder and we created a folder called fonts that will contain all our font files. So we are going to change the directory to fonts/.

A screenshot that shows you can edit the font directory for your font files

Now that we’ve changed the directory, we can go ahead and copy the CSS and paste it into our own CSS file.

4. Download Font Files

Scroll down to download all the necessary files. Unzip the file, and move the font files to the directory/folder you created. We’ve moved them to the fonts directory.

A screenshot that shows how to download your font files

And that’s all folks! You have successfully hosted Google Fonts on your own server. Hope you found this article helpful. And if you liked the Google Webfonts Helper tool, you can follow or fork it on GitHub.

Post a Comment

To post code, use the code tag with a class language-*
Examples: code class="language-markup"code class="language-css"