Embedding web fonts. Or, why images are bad

December 7th, 2010 · 5:02 pm @   -  No Comments

So, you want to use a custom font on your website – i.e. something other than Arial or Times? To ensure it looked right, the only way to do this used to be to encode the font as a picture. Bad idea. Enter web fonts.

Smashing Magazine have compiled rather a nice round-up of the different services on the market at the moment (as of October 2010). Embedding web fonts is an infinitely more elegant solution than creating an image of your special font. Using images breaks a number of WCAG regulations, and you can’t change the text (unless you upload a new image). So dynamically-updating websites are out. And search engines, like Google, are going to have a hard time knowing (exactly) what you’ve written.

@Font-face face off round-up

It’s still a pain in the backside to embed fonts, as you’ve got to test them on lots of different platforms (different browsers on PC, Mac, Linux, then mobile devices, such as iPad, iPhone, Android etc.). At least with an image you know it’s going to look the same.

But web font services are improving at a double-quick rate. When we built the Brooks Foundation website, one of the criteria was that we had fonts from their branding style – all very understandable. But it had to work on iPhones. And iPads. And on Macs. And PCs. And it couldn’t use images. We settled on sIFR (which uses Flash, but can drop back to Javascript for Apple).

Now there are a whole host of services. Check out the FFFO round-up above (and also Cufon and Font Squirrel).

We’ve started using Font Squirrel’s @font-face generator to embed the typewriter font for the Robur website (which works fine for everything apart from Android, which is a particular gripe of mine – but it doesn’t use Javascript, so keeps everything nice and clean).

Google have now entered the foray, which is exciting news as they will (in most likelihood) keep their service free, and, it all should work nicely.Most importantly, it works on my Android phone.

Updated! 15Feb11: We recommend embedding using the New Bulletproof syntax. Now you can grab your fonts on Font Squirrel, get it to generate some nice code for you, then manually edit the CSS (will only take a few minutes). This now supports everything including Android, so I’m happy.

Tags: ,

Leave a Reply