Menu
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?
215
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
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';
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
