One of the most exciting developments over the last couple of years for web design has been the ability to include custom font choices. We can finally spice up designs without having to create images out of text. But what are the pros & cons of web font technologies and where do we still need to advance.

How to add web fonts
There are several ways to add custom fonts to a website. You can use CSS3 @font-face rule to include a font file you have saved on your server. You can use a hosted font service like such as Typekit and Fontdeck who will give you a little bit of javascript for including one of their fonts. Or, my preference, you can use a free font hosting services like Google Web Fonts.

Web Font Pros

• Great for creating a unique and fresh look in your website
• Custom fonts are readable, selectable and search engine friendly
• Being text rather than images, it can be dynamic content and wrap to new lines
• Create designs inline with client branding
• More creativity!

Web Font Cons

• Licensing issues – read the fine print as some fonts require additional licences for embedding fonts. (By using font services like Google Fonts you avoid licensing issues.)
• The free fonts available are currently very limited
• Slow load times. Depending on the font used and how you include, you’ll often see the default font for a second or two until the web font has loaded.
• Just because you can doesn’t mean you should. Going crazy on custom fonts can lead you with a dogs breakfast. Use sparingly!
• Not available on all browsers. Unfortunately we can’t ignore Internet Explorer just yet.

Technology catchup
Hopefully in the next couple of years all browser will be compliant with web fonts and access speeds increased. Until then we still need to cater for non-compatible browsers. I would suggest reading CSS3 @font-face Design Guide for a great tutorial on setting up fall back fonts correctly.