Loading font from google web fonts or fonts from own server, which one is more efficient in terms of page load time?

Question

While working with some custom fonts, I have two options either I can load a form from my own server or I can load a google web fonts. But my concern is which one efficient in terms of page load time?

The way I am using css is

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
    } 

Here, while loading font, I am also using cacheing using font version and loading the fonts from CDN.

The font which I am trying to load is near by 36k in terms of size.

h1 {
       font-family: 'MyWebFont', Fallback, sans-serif;
}

Implementation of google fonts

<link href='http://fonts.googleapis.com/css?family=Caesar+Dressing' rel='stylesheet' type='text/css'>

h1{
  font-family: 'Caesar Dressing', cursive;
}

Can someone please help me to understand which one should be used either google web fonts or custom form own server. In terms of page load time which one is best ?

Solution 1

Downloading the fonts from the google cdn is always going to be faster, if not for you (in the case where you're in lan with your server), for everyone else for the simple reason that the google cdn servers will probably be much closer to them rather than to your server.

Also, if you want to go even further google also hosts a couple of other useful things on their cdn, you can even get jquery from them with the same advantages listed above.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Solution 2

Which one should be used depends on how fast your server is, where in the world your server is located, and where in the world each individual visitor to your website is.

Google's servers are pretty fast, usually they will be faster. But there are some regions where their servers are no good and you should use your own.

Comments

[Abhi Beckert]

For me, downloading from google's server is about 1 second slower than downloading from our own servers. Our datacenter is close by, google's server is on the opposite side of the world and multiple requests need to be made. At least in my country, google's local CDN does not cover their font hosting service right now.

[Edward A]

@AbhiBeckert There are going to be cases when google's CDN can be slower, but if you have people accessing the site from around the world, on average google's CDN is going to be the fastest option.

[Abhi Beckert]

Most websites don't get traffic from all over the world. At the very least, they only get traffic from people who speak the same language as what the website is in. For the website I'm working on where I ran into this issue, google's server takes about 1 second to respond with a font file, while with our own server it's closer to 30 milliseconds. We run our own servers and I know google has a datacenter in the same city as ours. If they're not using it for fonts, then presumably the font service generally isn't as well distributed worldwide as the rest of their services.