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
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”.
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.
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
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
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.