Living behind the Great Firewall of China can sometimes be frustrating, especially when working in projects that rely heavily on any type of Google hosted services. Believe it or not, but the world’s most popular search engine has been completely blocked in Mainland China, so using Google hosted fonts or jQuery is usually a bad idea.

Just last week, a China-based client of mine complained that their website was taking extremely long time to load. Even the simplest pages would basically crawl to a halt and it was my mission to figure out why.

After inspecting the website with Chrome’s Network inspector, it was clear that Google services like Google Fonts and other Western social media related elements (Facebook Fanbox, Twitter Box) were contributing to the problem. Due to the sad fact that these services are blocked in Mainland China, the browser  never really finishes loading them and everything just looks horrible. I will write an article later about how to deal with each one of these elements, but for now let’s concentrate on the Google Fonts issue.

Since China’s policy towards Western online services changes from time to time, you will find that it is always safer to store as much locally as you can. That means, independent of your website being hosted in China or not, you should aim to make your content as  independent as possible from third party services. In this specific case, the best solution would be to host the fonts locally instead of trying to pull them directly 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 wish to avoid.

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

In order to keep this from happening we will host the font files together with our website files. This will ensure that the fonts will be reachable each time and help speed things up a bit. Because your browser can only work with “.woff” format font files, we will have to rely on a little trick in order to get our hands on those.

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(http://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(http://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;
}
CSS

If you are working with Latin languages (most European languages), then latin and latin-ext should be the only two character sets you will need. Also, keep in mind that if you have selected multiple font-weight configurations in the Google Fonts Dashboard, then you will be presented 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
URL

Step 4:

Once you open the URLs above your browser will begin downloading the file. All you need to do now is upload these files to a folder within your hosting service. If you are using WordPress, it might be a good idea to pack these files somewhere within 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');}
CSS

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.


  • Hi, this is a comment.
    To delete a comment, just log in and view the post's comments. There you will have the option to edit or delete them.

  • Thomas Welton

    Or you can you the site http://www.localfont.com/ where you can download the font files and CSS required for google fonts

  • Thank you so much!! I just did this to my site. In my performance test I went from 24 requests to 19 and shaved some milliseconds :)