Geek Answers Handbook

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

I use custom fonts on 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');

What will be faster considering page load time?

+7
source share
1 answer

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

results

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

enter image description here

the code

google.html fonts

 <!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'; }
+13
source

More articles:


All Articles