A little while ago I got a question from a good friend and client of mine about using fonts on websites. This also applies to other ways of faking web fonts, like sIFR. As others have been asking me about this lately, I thought I’d put my answer up here, so that I can point poeple at it in the future:

Q:

Please remind me about images of text vs real text on websites. Search engines search alt. text so why not have a navigation with images and nice typography rather than a limited selection of web fonts?

A:

It’s true that search engines search alt. text – and you can do it that way. If you’re determined to use images, you should probably also use a hidden <span>Menu Text</span> inside the <a> element. These sort of work Ok, for the most part. The arguments for and against this are sort of like flash sites vs. real websites; one is the Right Thing To Do and one isn’t. You can make the wrong way work mostly Ok, if you work at it, but however hard you try, there are always downsides and you’re putting yourself at a slight disadvantage all the time.

Why is real text better?

There are a large number of little reasons why text is better than images; images are: harder to update when you change or add things to a site, harder to update when you change site designs or colours, much larger and slower to download, cause extra HTTP requests slowing down page loading even further, aren’t searchable (either by search engines, or users with ctrl+f), aren’t translatable, don’t zoom/re-flow as well on mobile devices, don’t render as well when zoomed or viewed as different resolutions, don’t print very well, aren’t as accessible, etc, etc…

Even better…

Also, I saved the best bit till last: You don’t need to choose any more! The ‘limited selection of web fonts’ issue has gone away – you can now use any font you like, provided that you’ve got a license to use it on a website. As far as I can see, this makes using images of text completely obsolete – I can now think of no circumstances where using images of text is even remotely justifiable. Previously, the only argument in favour of images was ‘it looks nicer’; this solitary argument in their favour is now gone.

Here are some resources that cover modern web fonts:

• http://nicewebtype.com/
• http://webfonts.info/wiki/index.php?title=What_are_webfonts%3F – this link also has a nice list of available web fonts, both commercial and open/free.

Here are some examples of sexy looking websites that make good use of modern web fonts. Notice that all the text is normal, selectable, searchable text, even the sexy looking stuff:

Some by me:

• http://joaobarao.com/
• http://cubanblues.co.uk/

lots by others:

• http://nicewebtype.com/fonts/bello-and-proxima-nova/
• http://webfonts.info/wiki/index.php?title=Links_to_demo_pages
• http://opentype.info/blog/category/webfonts/
• http://www.robinwood.de/blog/
• http://www.brizk.com/
• http://forabeautifulweb.com/blog
• http://ilovetypography.com/

How do I actually use webfonts then?

The webfonts stuff is all just CSS, and pretty simple to use. You just tell it where the font file is, and give it a name:

@font-face {
font-family: 'DroidSansRegular';
src: url('/fonts/droidsans-regular.otf');
font-weight: normal;
font-style: normal;
}

then you just use it as normal:

p {
font-family: DroidSansRegular, Arial, sans-serif;
font-size: 18pt;
}

there are various tools which will write the (slightly more complex) cross-browser version of that. I used FontSquirrel for http://joaobarao.com/ – you can see what it generates here: http://joaobarao.com/css/joao.css – all the @font-face stuff at the top is generated for you by FontSquirrel. I used two excellent free / open fonts: Fontin and Droid Sans on the http://joaobarao.com/ site.