Login/Register
Which is more efficient considering page load time, using local font files or google web fonts?
Asked Answered
Solved cssfontsfont-facewebfontsgoogle-webfonts
N

1

7

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?

Nock answered 25/3, 2012 at 9:27 Comment(2)
google api would be a better option because it may possible that which font you used is not installed in the every user's computer but in the case of the google api it makes no difference and i think normally font are not very bigger in the size so font makes no difference on the loading speed and once the user load the page the font will save in the cache memory. – Niple
Search for Content Delivery Network on the web. Google veriosn might be faster. – Mccloskey
A
14

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';
}
Anfractuosity answered 25/3, 2012 at 12:18 Comment(1)
Good approach, but it's really dependent on your own server setup and the location of the viewer. – Propertied

© 2022 - 2024 — McMap. All rights reserved.