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 third 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.comto grab CSS.
Additional requests to fonts.gstatic.com, a different hostname to download font files.
- 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.
Load Time: 2.454 s
Fully Loaded: 2.548 s
Two other things that stood out was the 43 ms SSL negotiation time on fonts.googleapis.com and then the initial DNS lookup time to fonts.gstatic.com.
We also ran tests through Pingdom.
Total load time: 226 ms with 13 HTTP requests.
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 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 style sheet 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+ */
}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.
