How to Migrate Google Fonts CDN to Your Own CDN

google fonts cdn

There are a lot of different options today when it comes to serving up web fonts on your website or application. You can use a system font, host fonts locally, or use 3rd parties like Google or Typekit. Today we want to share with you the fourth option you have, which is to host Google Fonts on your own CDN. Below we will discuss some of the reasons why this is beneficial and also how to migrate away from Google Fonts CDN and take advantage of your content delivery network.

Google Fonts CDN vs Your Own CDN

The Google Fonts CDN is very fast and reliable, there is no doubt about that. And you can’t beat free. They have a large infrastructure and latency is generally quite good. However, check out some of the disadvantages below when using the Google Fonts CDN:

  • One extra unnecessary DNS request and lookup to fonts.googleapis.com to grab CSS.
    google fonts load time
  • Additional requests to fonts.gstatic.com, a different hostname to download font files.
    google fonts load
  • You aren’t taking advantage of a single HTTP/2 connection (KeyCDN supports HTTP/2).
  • Less control over the caching of your web font files.

While all of these things are relatively minor, every website optimization you make begins to add up. In a perfect world, you should really have every single asset load from your own CDN provider, except for your initial HTML doc load. This minimizes DNS lookups and takes full advantage of parallelism in HTTP/2. In most setups this won’t be possible as 99% of websites will need to run Google Analytics. But even with that you could setup a CRON job to sync the Google Analytics script locally and then load it off of your CDN. This is not recommended by Google, but there are actually a lot more people doing this than you might think.

However, once you introduce third party tracking or remarketing pixels such as AdRoll, Perfect Audience, or Facebook, you might need to sacrifice some load time because they provide important data that is crucial to your business and generating revenue. When it comes to web performance it is always a toss up between what do you really need and what you can live without.

Speed Test Comparisons

We decided to run some speed tests so that you could see the difference it makes, even though minor, when migrating away from Google Fonts CDN and hosting them on your own CDN. We ran the tests multiple times on our test site and took the average. We are using Google’s Open Sans font, weights 400 and 700, in our examples. Again remember, this could vary slightly due to your own CDN provider’s POP locations.

Fonts Serving from Google Fonts CDN

We first ran our test on WebPageTest with Open Sans serving from Google Fonts CDN.

google fonts no cdn webpagetest

Load Time: 2.454s
Fully Loaded: 2.548s
Two other things that stood out was the 43ms SSL negotiation time on fonts.googleapis.com and then the initial DNS lookup time to fonts.gstatic.com.

We also ran tests through Pingdom.

pingdom summary no cdn

pingdom waterfall no cdn

Total load time: 226ms with 13 HTTP requests.

Fonts Serving from KeyCDN

We then copied the Google Fonts, Open Sans, to serve from KeyCDN and ran another test on WebPageTest.

webpagetest with cdn

Load Time: 2.360s
Fully Loaded: 2.452s
As you can see there are only two HTTP requests now because we no longer have to grab the CSS file from fonts.googleapis.com. And both of the additional requests to download the font files are much faster because they are on the same HTTP/2 connection as the rest of the requests and no additional DNS lookup delays.

We also ran another test through Pingdom.

pingdom summary with cdn

pingdom waterfall with cdn

Total load time: 221ms with only 12 HTTP requests now since we no longer have to make the call to fonts.googleapis.com.

SPEED TEST Google CDN (MS) KEYCDN (MS) WINNER
WebPageTest Load Time 2454ms 2360ms KeyCDN
WebPageTest Fully Loaded 2548ms 2542ms KeyCDN
Pingdom Load Time 226ms 221ms KeyCDN

Again these results can vary, so do your own tests as each environment is different. But these tests also help demonstrate the power of HTTP/2. And remember, you can speed up Google Fonts CDN slightly by using preconnect.

How to Migrate Google Fonts CDN to Your Own CDN

Follow the steps below to easily start serving Google Fonts from your own CDN. In this example we are doing it on a WordPress install and using KeyCDN. If you have a static website you can skip some of these steps as it will be even easier.

1. Download Fonts From google-webfonts-helper

The first thing you will want to do is download the Google fonts that you want to use. The easiest way to do this is to use the free open source google-webfonts-helper tool. It allows you to easily grab any Google web font to host on your website or CDN. This is one of those tools you should definitely bookmark for future use!

Select the fonts and weights that you want to use and click on the “Download” button. We chose Open Sans, weights 400 and 700. In our example we are also using only WOFF and WOFF2 versions for modern browser support. You can read more about fonts in our web font performance post about choosing between WOFF, WOFF2, EOT, TTF, and SVG. The awesome thing about this tool is that it packs them altogether for you in a zip file.

2. Upload Fonts to Your Server

The next step is to upload the Google Fonts to your server via FTP. In our example we are working with a WordPress site, so along with the WordPress CDN Enabler plugin installed, we drop them on the root of our website in a folder called “fonts.” Because we are using a pull zone with KeyCDN and the CDN Enabler plugin, the fonts are automatically copied over to our CDN.

3. Update CSS

Then copy the CSS from the tool and put it into a separate stylesheet on your website or you can use a free plugin like Simple Custom CSS and JS to add custom CSS to your header or footer. Then simply update the source URLs so that they are pointed at your CDN.

/* open-sans-regular - latin */
@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
 src: local('Open Sans'), local('OpenSans'),
 url('https://cdn.example.com/fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
 url('https://cdn.example.com/fonts/open-sans-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 700;
 src: local('Open Sans Bold'), local('OpenSans-Bold'),
 url('https://cdn.example.com/fonts/open-sans-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
 url('https://cdn.example.com/fonts/open-sans-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Note: WordPress can be a little trickier than a static site because your theme or plugin might already be adding Google Fonts, and most like they are being enqueued. In that case you might want to update that source instead or completely disable loading them that way. You don’t want to be loading Google Fonts scripts twice. Most good theme and plugin developers can easily provide you with a way to disable Google Fonts or update the enqueuing process if you ask.

And that’s it! Your Google Fonts are now loading from your CDN.

Summary

As you can see, loading Google Fonts from your own CDN can actually be faster in most cases because it reduces the number of HTTP requests, DNS lookups, lets you take advantage of a single HTTP/2 connection, and have more control over caching. We recommend following the steps above and trying it out for yourself. Every little bit helps when it comes to website optimization and performance.

Related Articles

How to Migrate Google Fonts CDN to Your Own CDN was last modified: September 29th, 2016 by Brian Jackson
  • The other day I was looking a way to optimize Google fonts on my sites and this is something I shall try! Thanks

  • Just used this guide and everything went off without a hitch! It might only provide a small speed increase, but it’s the little stuff like this that most sites don’t take the time to implement.

    Thanks for the step-by-step guide, Brian. Very easy to follow, as always.

    • No problem Dave! When it comes to web performance, every optimization adds up. Hopefully this will put you ahead of the competition :)

  • Does this work with Font Awesome as well?

    • Yes, you can load the Font Awesome files directly from KeyCDN. Just make sure they are link to the CDN URL.

  • disquschirp

    When you link to the Google Fonts css file they use browser detection to include only the relevant font file for your browser (e.g. woff). If you make a local CSS entry using google-webfonts-helper you can end up delivering multiple font files (e.g. woff + woff2 + ttf when testing on GTmetrix).

    • It will only deliver the correct font files on new browsers. I tested IE, Firefox, Chrome, etc… and they all deliver the latest font based on browser support, such as WOFF2 on Chrome and WOFF on IE. Chrome didn’t deliver WOFF and IE didn’t deliver WOFF2. And this was using a local CSS setup.

  • farieznur

    Awesome. Installed KeyCDN and implemented this trick. Consequently, my blog load time increased dramatically.

    Initial setup (no cdn) = 3.42s
    Slowest = 6.36s
    with keycdn + above optimization = 1.77s

    http://i.imgbox.pw/2016-05-27_203818.png

  • Great post, thanks!

  • Yum

    Just made some tests and found out that Google Fonts CDN and cdnjs is much more faster globally even including the time DNS lookup takes.
    When u do the test using some different locations u’ll definitely jump to my conclusion.

Shares
Share This

Share This

Share this post with your friends!