Now Using Web Fonts
I've always baulked at the idea of embedding fonts in browsers. It just seemsed wrong to me and against all that is pure and good about the web. Work with what you're given instead, I've always thought. Why make the user download a file to use a font? Yack.
But then working with what you're given has always meant very little choice. Verdana for everything?! Bit boring.
It's only since I discovered (and started using) Adobe's new open-source font, called Source Sans Pro, that I took another look at my stance on webfonts and I've changed my mind on it.
It's the 21st century and browser support for downloaded fonts is pretty much ubiquitous.
This site now uses Source Sans Pro for article titles. Did you notice? It's needs a bit more tweaking to get a better effect, but I just wanted to test the idea for now.
Using Web Fonts is extremely easy. Just go to Google WebFonts and choose those you like. You'll then be given a CSS file to link to from your website. For me I just added, this line to the <head>:
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600" rel="stylesheet" type="text/css">
You can then reference the font from within your CSS as if it were a normal font. Like so:
article header h3, article h4 {
font-family: 'Source Sans Pro', Verdana;
font-weight: 600;
}
Simple as that. The hard part is not getting carried away!
Note that the font is only downloaded from the web if it isn't already installed on the local machine. Also note that the fonts are cached by the browser. I can't believe I resisted this long before using them.
Skip to the 
You can subscribe to an individual
ok, not to be a cry baby but I don't like the LOOK of the new font - it looks too tall and thin to me. If I look at it compared to the "About this Page" header next to it I just like the old font better - it just seems to have more "weight" if you know what I mean :o)
Reply
Never going to be able to please everybody ;-)
I know what you mean though. For now I've just stuck them in there as a test.
The whole fontography of this site needs going over after I re-wrote all the CSS from scratch when it went "responsive" a month back.
I'll make it nice at some point soon.
Reply
I hate to break it to you, but web fonts are just that - a direct download of the font bitmaps via CSS, base64 encoded. Check it out in wireshark or firebug/crome dev tools if you don't believe me.
That said, you can make the whole thing faster by copying the base64 data url, and directly embedding it in your CSS file. It's one less HTTP call that way. :)
Obviously, the more fonts you put in the package, the heavier the download gets. So, yeah, don't "get carried away".
Reply
Google serves different font formats to different browsers (e.g. WOFF to Firefox and EOT to IE). So you would, at the very least, have to do some browser sniffing to serve the right files to clients. I believe it's better to leave it to Google.
Reply
I just want to add one thing. In the 'family' parameter, you should always include all styles and weights (i.e. italics and bold) that you will use in your CSS - just as you, Jake, did with including weights 400 and 600.
Otherwise the font rendering in browsers will lead to ugly looking 'faux bolds'. On A List Apart http://www.alistapart.com/articles/say-no-to-faux-bold/ you can read: "If text is styled as bold or italic and the typeface family does not include a bold or italic font, browsers will compensate by trying to create bold and italic styles themselves."
I think this can more often be seen on IOS devices. Some people even thought it was an iPhone rendering bug http://stackoverflow.com/questions/.. ..2/ios-4-2-webfont-ttf-s-bold-font-weight-rendering-bug/.
And another article from Smashing Magazine http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/.
Reply
Thanks Roman. I'll make a point of reading those links later on.
Reply
My biggest problem with Google's fonts specifically is their CDN. While I would expect it to be very robust, Instead I frequently see my browser stuck, "Waiting for http://fonts.googleapis.com".
And I see that at multiple sites, with multiple browsers.
I am not willing to risk the performance of my sites on that CDN.
Reply
I agree. One would expect huge CDNs like those of Google and Facebook to outperform any normal web host but in practice I often find websites waiting to download exactly those resources. The same is true when linking to jQuery on Google's CDN.
Reply
Was thinking about this recently and for purely public internet sites, using Google might be OK. But like Dave said could be an issue at times.
For Intranet sites, I would want to host the fonts and guarantee access and performance (even without internet access).
Reply
Jake,
Now that you made the web font jump, I highly recommend you to have a look at icon fonts, if not done already:
http://fortawesome.github.com/Font-Awesome/
Small file size, hundreds of icons at your disposal without the need for images, and entirely scaleable and responsive. Supported as far back as IE7.
Reply
WOW! Now, that's nice. Bookmarked
Reply