How to Host Google Fonts Locally

Because some countries’ policies toward Western online services change from time to time, it is always safer to store as much locally as possible. That is, regardless of whether your website is hosted in that region or not, you should strive to make your content as independent of third-party services as possible. In this case, the best thing to do would be to host the fonts locally instead of trying to get them from Google.

 GETTING THE FONT FILES

Normally, when embedding Google custom fonts into your website, it is enough to head over to the Google Fonts Page, search for the font you wish to embed, copy the HTML tag provided by them, into the HEAD section of your site and you’re good to go. Again, as explained earlier, this approach would force the browser to download the font files from the URL specified in the “href” attribute of the tag. This is exactly what we want to avoid.

<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

To prevent this from happening, we will host the font files with our website files. This ensures that the fonts are always accessible and helps to speed things up a little. Because your browser can only read “.woff” format font files, we’ll have to use a little trick to get our hands on them.

STEP 1:

Head over to the Google Fonts Page and find the font you wish to use. Most of the time it is enough to do a Google search for “Google Fonts <Font Name>”. In this example I will be using the Lato font, so I would search form Google Fonts Lato.

STEP 2:

Once you have located your font, copy the URL of the font and open it on a new browser tab. In this example, our font is Lato and the embed link tag is something like this:

<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Google fonts Lato Font link tag
The URL that needs to be copied would then be:

http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext

URL to Lato CSS file

STEP 3:

Navigating to the URL above, should display a CSS file similar to the one bellow:

/* latin-ext */
@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
 unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

If you’re working with Latin languages (most European languages), the only two character sets you’ll need are latin and latin-ext. Also, if you have selected various font-weight configurations in the Google Fonts Dashboard, you will be provided with a larger CSS file with more font configurations.

That being said, we are now ready to get our hands on the precious “.woff” files we need.  To do that, just copy the URL from the src attribute and open it in your browser. In this case, I would download 2 files from the URLs below:

http://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2

http://fonts.gstatic.com/s/lato/v11/UyBMtLsHKBKXelqf4x7VRQ.woff2

STEP 4:

When you click on one of the URLs listed above, your browser will begin downloading the file. All that remains is to upload these files to a folder on your hosting service. If you’re using WordPress, it could be a good idea to include these files in your theme.

I also prefer to rename the files to something a bit more friendly, so instead of having  1YwB1sO8YE1Lyjf12WNiUA.woff2 and UyBMtLsHKBKXelqf4x7VRQ.woff2, it’s generally a good idea to rename the file to something like lato-light.woff2 and lato-light-ext.woff2.

STEP 5:

After you have saved the files somewhere within your web directory, it is time to call the files in your stylesheet. Open your theme’s style sheet (style.css) and add:

@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: url('../fonts/lato/lato-light.woff2') format('woff2'),url('../fonts/lato/lato-light.eot'), url('../fonts/lato/lato-light.eot?#iefix') format('embedded-opentype'), url('../fonts/lato/lato-light.ttf') format('truetype'), url('../fonts/lato/lato-light.svg#latolight') format('svg');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: url('../fonts/lato/lato-light-ext.woff2') format('woff2'),url('../fonts/lato/lato-light.eot'), url('../fonts/lato/lato-light.eot?#iefix') format('embedded-opentype'), url('../fonts/lato/lato-light.ttf') format('truetype'), url('../fonts/lato/lato-light.svg#latolight') format('svg');}

If you have other file formats like TrueType (.ttf) and SVG (.svg), feel free to add them as well.

By now, your browser should be able to reach the fonts directly from your web service. If you were already using Google Fonts, make sure that you remove the link tag to the Google Fonts service.

That is it for this article on how to host Google fonts locally. We hope you enjoyed it.