How to host google web fonts on my own server?


There is a tool to help you download all font variants. It as well generates the corresponding CSS for implementation.


I need to use some google fonts on an intranet application. The clients may or may not have internet connection. Reading the license terms, it appears that its legally allowed.

How to host google web fonts on my own server?

Please keep in mind that my answer has aged a bit. There are other more technically sophisticated answers below, e.g.:

  • localfont
  • neverpanic/google-font-download
  • google-webfont-helper

so don't let the fact that this is the currently accepted answer give you the impression that this is still the best one.

You can also now also download google's entire font set via on github at their google/font repository. They also provide a ~350MB zip snapshot of their fonts.

You first download your font selection as a zipped package, providing you with a bunch of true type fonts. Copy them somewhere public, somewhere you can link to from your css.

On the google webfont download page, you'll find a include link like so:,700,400italic,700italic|Candal

It links to a CSS defining the fonts via a bunch of @font-face defintions.

Open it in a browser to copy and paste them into your own CSS and modify the urls to include the right font file and format types.

So this:

@font-face {
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: 700;
  src: local('Cantarell Bold'), local('Cantarell-Bold'), url( format('woff');

becomes this:

/* Your local CSS File */
@font-face {
    font-family: 'Cantarell';
    font-style: normal;
    font-weight: 700;
    src: local('Cantarell Bold'), local('Cantarell-Bold'), url(../font/Cantarell-Bold.ttf) format('truetype');

As you can see, a downside of hosting the fonts on your own system this way is, that you restrict yourself to the true type format, whilst the google webfont service determines by the accessing device which formats will be transmitted.

Furthermore, I had to add a .htaccess file to my the directory holding the fonts containing mime types to avoid errors from popping up in Chrome Dev Tools.

For this solution, only true type is needed, but defining more does not hurt when you want to include different fonts as well, like font-awesome.

AddType application/ .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

Great solution is google-webfonts-helper .

It allows you to select more than one font variant, which saves a lot of time.

Woff is a compressed (zipped) form of the TrueType - OpenType font. It is small and can be delivered over the network like a graphic file. Most importantly, this way the font is preserved completely including rendering rule tables that very few people care about because they use only Latin script.

Take a look at [dead URL removed]. The font you see is an experimental web delivered smartfont (woff) that has thousands of combined characters making complex shapes. The underlying text is simple Latin code of romanized Singhala. (Copy and paste to Notepad and see).

Only woff can do this because nobody has this font and yet it is seen anywhere (Mac, Win, Linux and even on smartphones by all browsers except by IE. IE does not have full support for Open Types).

How do I use google fonts on my site without compromising the page speed of the site

Short answer: no. Slightly longer answer: no, you can try but it is highly unlikely that you will beat what Google WebFonts provides to you already. Now let's dissect the problem a bit more...

First off, you must have a fairly light page if adding a single external resource (webfont) is having such a negative impact on your PageSpeed score -- arguably, we should fix that on the PageSpeed side. Now, back to webfonts!

Ground zero: adding any external resource to your page will have a negative impact on the overall performance of your page. With webfonts, this can be an even larger problem because CSS is considered a "critical resource" which will hold up rendering until the font arrives - if we were to skip this step, then the user might get a "flash of unstyled content" (FOUC), where the page is rendered with one font, and then restyled when the font arrives. This is a jarring experience - you definitely don't want this.

Step two: Using a webfont means we must include an external CSS file - in this case, served by Google servers. These servers are heavily optimized for low latency, but at the same time, there is no magic here - it'll still take some time!

Step 3: What's inside the CSS file? This is where a lot of people criticize Google WebFonts.. The stylesheet provides url() references to the webfont files. Why not base64 / inline the font? Well, Google WebFonts are rendered across billions of pages every day, so we chose to use URLs specifically because the font is very likely to be in your browser's cache. If you're refreshing your page with a cold cache (as you should) to test first page load, then you will always fetch the font.. but that's not the experience we're optimizing for.

Further, why not just inline the font into your page? Well, each platform has different file formats it accepts (woff, eot, ttf, etc), and Google WebFonts dynamically serves the most optimized format based on your current platform. If you simply download the WebFont (ex, woff), and inline it, then it may work well for you, but not for your visitors on different platforms. Additionally, the compression behind these fonts is always being improved - if you stick with the Google servers, you'll automatically inherit these improvements. If you roll your own, then you're stuck.

In a nutshell: if you want to roll your own, then make sure you optimize the fonts for each platform, serve conditional fonts based on platform, and keep up with the compression improvements over time. If you can do all of that, then you may do better than what's provided. :-)

Last but not least. Do not be afraid to use webfonts. Yes, they add additional time, but presentation matters also. It's your call. If the imposed latency is unacceptable, then stick with the default fonts. But trying to beat what Google WebFonts infrastructure / CDN is unlikely to get you very far.

P.S. One last tip: make sure you actually use all the weights and font-faces you include. Many people select entire families (just in case), and end up not using them at all, which on some browsers leads to unnecessary downloads.