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

advertisements

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 ?


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>