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 ?

Edward A Edward A · Accepted Answer · 2013-03-26T08:14:20

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>

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

2 Answers