Walter’s post got me curious, so I did a bit of research regarding Google web fonts and performance.
First, each variant of a font is served as a separate file. Open Sans 700 is an entirely separate font file from Open Sans 300 Italic. However, don’t start changing to requests to only serve the fonts used by the page just yet! Modern browsers are smart enough to not download the font files that are not being used by the page.
On a related note, if your machine has the font installed locally, it will use that and will not download the font files from Google. Yay!
Side note: if you do have the fonts installed locally, be sure to disable them to test the website. I’ve seen some odd bugs caused by the web fonts that we not present in the local files, especially if you are using the &text=
attribute, see below.
Also, you should only be sending one request to Google for the fonts you need on a given page. In this request, I’m asking for two entirely separate font families, Source Code Pro and Source Sans Pro.
<link href="http://fonts.googleapis.com/css?family=Source+Code+Pro:500|Source+Sans+Pro:400,700,400italic,900" rel="stylesheet" type="text/css">
You can ask for a specific subset of a font by using &text=yourTextHere
. Don’t forget that you will need to URL encode any entities. Here is an example that will only fetch the characters for “Hello world”:
http://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20world
There’s a bunch of other cool stuff that you can do with Google Web Fonts (fire animation, anyone?), so do check out their docs.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options