Typography has long been a large part of graphic, and web design. In the past though, web design has had to suffer typographically, with any text that was wanted in a non web safe font (a font already stored locally on users computers) had to be rendered as an image; not exactly brilliant for the user interface department. Font’s like Lucida Grande, Helvetica and Myriad Pro were as exciting as it got. Not any more though.
Over the last few years we have seen the rise of some fantastic tools to allow us to get creative with the typefaces we use on our websites. There are really two mainstream approaches here; @font-face, and of course, Flash. All of the solutions available have their drawbacks; not all are free for instance, but one thing is for sure; They are all advancing web typography for everyone. Let’s get stuck in and see what options are available to us to use different fonts on the web.
Google recently entered the font replacement game with their free Font API and font directory. It is still a beta lab product, but is incredible easy to use, and loads the fonts on Google’s back, just like has become common for loading Jquery these days. The problem with Google Font API, is its font directory though. There are only 19 fonts currently available, and compared to other options that are only limited by the amount of free fonts that you can find, this is fairly lacking in choice.
However, like most of Google products, it is a fantastic piece of engineering, and is incredible easy to use. All you have to do is include a dynamic file in the head of your document, and from there, you are free to use the font anywhere in your css. The syntax allows you to load multiple fonts, different font variants and so on in the same single line which is fantastic. The following line, for instance, would load Cantarell italic and Droid Serif bold.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold" />
To learn how to implement the Google font API, Jeffrey Way at Nettuts has made a fantastic quick video.
Typekit is a premium web font replacement service, with a useful free plan on a limited selection of fonts. They work with foundries from all over the world to provide their users with the best selection of fonts possible, and this shows with the number of fonts they are able to provide compared to other services; nearly 500! Some of the most influential web designers on the internet use it, and that’s testament to its quality and delivery.
Typekit aims to make using custom fonts in your web design as easy as possible, and so offers two ways to implement your chosen fonts into your website. The first is via the kit editor. This Kit Editor is for those that are a little less web language savvy than some of us, and instead of having them hand code the fonts into their design, it asks you what selectors you want the font applied to (class’s, id’s, elements), and by clicking publish, Typekit will sort everything else out for you via the one line of code you insert into your html document.
The other option provided to you is not to use the Kit Editor, but hand code the fonts into your css yourself. Once you’ve included the one line of code in your document, the font name will be recognised and loaded!
If you are willing to pay premium for your web fonts then, this is the way to go. The range of premium and free fonts that you have access to, and the ease of implementation is incredible. A portfolio price plan weigh’s in at $49.99 a year, so it is all about weighing the pro’s and con’s of what you are getting with that, and whether the fonts you want to use are available under other font replacement techniques.
What the font loader does, that the Google Font API doesn’t is applies class’s to the page while the font’s are loaded, and after the font is loaded, allowing you specify a font to render in while the font loads. This is not supported in the Google Font API however, where for example, Chrome, IE and Safari will just not render the text until the font loads andFirefox will render the font in the browsers default font until the font loads causing a flash of unstyled text. Although you may still get a flash with Google Font Loader, the change won’t be so drastic as you’ll be able to choose that default font.
To learn how to use the Google Font Loader, Google have written a great guide here.
For those font’s that aren’t provided with a font-face kit, but are still font-face compatible, or font’s that font-squirrel is yet to come across, there is also a free font-face kit generator available! Simply upload your font file, and the generator will pretty much do the rest, unless you are looking to customise your kit a bit. This is by far the easiest, and best free way to implement a fantastic set of fonts into your website in my opinion. The ease of use, and speed of implementation is incredible.
However, like font-squirrel, and it’s font-face kit generator, it doesn’t limit you to a select library of fonts like the Google Font API does, and so provides much more versatility. Unlike the font-face alternatives above though, sIFR should only be used for small pieces of text, like headings. Using it on your whole site will seriously damage your site’s download time, and usability.
To learn how to use sIFR, and see an example, this tutorial seems to cover it all!
If you want to use Cufon, Jeffrey Way from Nettuts has written an amazing article on how to, complete with video!
Cufon and sIFR are slowly dieing out due to the massive surge of interest, and popularity of the font-face solutions; Font Squirrel, Google Font API and Loader, and Typekit. However, with their rendering not top-notch in all current modern browsers, Cufon and sIFR are often the go to technology for beautifully rendered headings. I hope this article has given you an insight into the technologies available to you. They’re the best that I know of, but if you happen to have a further solution, or want to express your opinion, start the discussion rolling down in the comments!