I love Google Web Fonts. They’ve really prettied up the internet. On the other hand, I don’t like how much they slow down load times. Here’s a little trick to speed them up a tiny bit.
Once you have selected a font, Google Web Fonts gives you a CSS file to include on your page. It looks something like this…
<link href='http://fonts.googleapis.com/css?family=Ubuntu|Sacramento' rel='stylesheet' type='text/css'>
If you open that stylesheet in a browser*, you’ll see that it’s just a few @font-face calls to load-up the font. (*View this CSS file with IE. Google must be doing some browser detection. In webkit, I only see the .woff version on the fonts.) The CSS file will look something like this…
@font-face {
font-family: 'Sacramento';
font-style: normal;
font-weight: 400;
src: url(http://themes.googleusercontent.com/static/fonts/sacramento/v1/WFDkXpubrEwopJnSlHV6CFQlYEbsez9cZjKsNMjLOwM.eot);
src: local('Sacramento'), local('Sacramento-Regular'), url(http://themes.googleusercontent.com/static/fonts/sacramento/v1/WFDkXpubrEwopJnSlHV6CFQlYEbsez9cZjKsNMjLOwM.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/sacramento/v1/WFDkXpubrEwopJnSlHV6CBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
src: url(http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_tMhxyW6i8lbI7YsUdFlGA.eot);
src: local('Ubuntu'), url(http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_tMhxyW6i8lbI7YsUdFlGA.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff) format('woff');
}
Pretty, huh? Now, copy/paste this into your main stylesheet and delete the Google Fonts CSS include. As we learned before, modern web browsers only download the files they need. So the unused version of the font wont slow you down. Eliminating that one request on my site saved me about 200ms (+/-100ms) on the initial load time.
If we open the same stylesheet link from Safari, you will get the trutype (.ttf) file link. Including that also is a good option. If we don’t have Safari installed, we could use the “User Agent Switcher” Firefox add-on to change the user agent to “Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.54.16 (KHTML, like Gecko) Version/5.1.4 Safari/534.54.16” and open the stylesheet to get the link to .ttf file.
Yeah I don’t this isn’t a good idea Dave imho. I see why you’re doing it, but that Google url will serve up different css for different browsers, and will bring in different font files dependent on the browser, including .woff, .ttf, .eot and .svg. If you copy all the relevant css, you’re bringing in unnecessary font files which will be even slower since you’d need to bring in all the font files, defeating the performance purpose. There’s a reason Google’s doing it this way. I think the best way to speed this up would be to serve the files locally and do your own browser detection.