Search code examples
cssfontsfont-facewebfontsgoogle-webfonts

Which is more efficient considering page load time, using local font files or google web fonts?

I am using custom fonts in my website. I could use a local font file:

src: local('Ubuntu'), url('fonts/ubuntu.woff') format('woff');

or just use google's:

src: local('Ubuntu'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff') format('woff');

Which would be faster, considering page load time?

Solution

  • I set up a GAE app with two test pages, one using Google Web Fonts and one using a local file. I made sure there was no caching and recorded how long it took each page to load. This was repeated 20 times on Chrome.

    Results

    • Average load time (Google Web Fonts): 486.85 ms
    • Average load time (Local file): 563.35 ms

    enter image description here

    Code

    fonts-google.html

    <!DOCTYPE html>
<html>
    <head>
        <title>title</title>
        <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
        <link href='both.css' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <h1>This is a heading</h1>
    </body>
</html>

    fonts-local.html

    <!DOCTYPE html>
<html>
    <head>
        <title>title</title>
        <link href='fonts-local.css' rel='stylesheet' type='text/css'>
        <link href='both.css' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <h1>This is a heading</h1>
    </body>
</html>

    fonts-local.css

    @font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: normal;
  src: local('Ubuntu'), url('ubuntu.woff') format('woff');
}

    both.css

    h1 {
  font-family: 'Ubuntu';
}