Total Followers 132,503
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.
The Google Font Loader is a secondary part of the Google font API; a Javascript library that gives you more control over font loading than the Google Font API does. Co-developed by Google, and Typekit, it allows you to load fonts from multiple font providers, including Google, Typekit, and Ascender, as well as pretty much any custom site you want.
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.
FontSquirrel is more of a database of free font’s, but it comes with a fantastic integration for font-face, a css way of serving web fonts. Google and Typekit use font-face, although it is far more refined via server sided scripts, and javascript. FontSquirrel however, is pure CSS. Once you browse the incredible directory of free fonts (theres 610 of them at the time of writing this!), the site will tell you if the font license allows you to use it with font-face, and on most fonts, there is a pre-built tab where you can instantly download a font-face kit for that font, which will then take you only a few seconds to implement into your css.
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.
sIFR stands for Scalable Inman Flash Replacement, but its basically a technology that replaces your text with a flash replacement, styled in your required font. It does require javascript and flash to be enabled; if not, then your css defined font will be used. sIFR does however seem fairly complex to set up; you have to create a flash file of your font, load javascript, and then choose what elements you want to font replace via javascript. The problem though, is that sIFR is heavy, so causes pages to load slower, and of course, doesn’t work on most mobile devices.
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!
You upload your font (with different variants if require), choose your characters, and then optimise your performance (quality), and file size for your site. Once this is done, you’ll need to include cufon javascript file, as well as your generated font file, and then choose what selectors you want to apply the font to. Definitely not as tidy as some of the font-face examples. It is however, compatible with most javascript libraries, so with their support, your selectors can become more dynamic.
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!
Get The Only Freelancer crash course you will ever need to read!
Matt is an 18 year old web designer from Scotland, UK. He loves creating beautiful websites across different platforms. High on his things to learn fully are Jquery and php. He is extremely excited by css3 and html5 and can't wait to see them rolled out fully. To learn more about Matt, follow him @QwibbleDesigns, or check out his portfolio.
Monday, March 26th, 2012 23:17
Really great info. Thanks dude! I used to use Cufon, but now i prefer mostly Google Fonts.
Friday, October 8th, 2010 01:09
I love Font Squirrel and Google Fonts. But the issue with all these replacements techniques is that none have the ability to be printed in Firefox. It seems to work in IE but not in firefox. I’ve found it very frustrating because I’ve created a page where you can change fonts and resize text dynamically to personalise your page but then you can’t print it. Back to the drawing board I think.
Monday, August 16th, 2010 14:03
I didn’t like the font number limitation of Google API, I’m using Cufón right now and it satisfy my needings. W/ cufón I can use any font I want, so it’s a great advantage over the Google solution.
Monday, August 16th, 2010 13:11
Thanks for this article, very useful
However I’m slightly worried about a major element of my site (the typography) relying on a third parties web service…
Should I be worried ?
Saturday, August 14th, 2010 00:01
Thanks Matt! Some alternatives to Typekit include FontsLive (http://www.fontslive.com) and the nearly launched Webtype (http://www.webtype.com), a premium webfont service.
Friday, August 13th, 2010 16:07
I only use google font directory and it works well… typekit is great but premium so I don’t use it :)
Nice article btw :)
Friday, August 13th, 2010 15:55
Awesome article Matt, Thanks!
Friday, August 13th, 2010 14:57
I’m using Cufon! Google API is easy to use but not much fonts :)
Friday, August 13th, 2010 13:20
Thanks for that nice article. A comparing table would have been a plus :)
Friday, August 13th, 2010 14:49
The Google Font API is really exciting and I’m hoping the font collection will start to grow.
I’ve never been keen on Cufon or sIFR so with the number of alternatives coming online there is an increasing amount of options to choose from.
Friday, August 13th, 2010 13:45
one must keep in mind font licensing…
it can really come back and bite you in the butt if font publishers will start scanning for font use, just like stock websites eventually figured out that approach
personally, I found font squirrel to be the simplest solution :)
Friday, August 13th, 2010 13:13
How about loading in fonts threw php? It cuts out the middle man and it doesn’t limit you to what font some site or anything else has. It just limits you to what fonts you upload on your server.
Sunday, August 15th, 2010 22:19
Then they’re output as images so it doesn’t really help as its not selectable etc.
Friday, August 13th, 2010 13:11
Nice. I’m sure I will use some of those ideas in future. ;)
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
![Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3]](http://www.1stwebdesigner.com/wp-content/uploads/2013/03/preview-small-webdesignvideocoursepart3.jpg "Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3]")
Konrad Oleksiuk
Friday, August 13th, 2010 13:11
Nice. I’m sure I will use some of those ideas in future. ;)
Hilario
Friday, August 13th, 2010 13:20
Thanks for that nice article. A comparing table would have been a plus :)
esranull
Friday, August 13th, 2010 20:41
good post thanks for sharing
LFD
Friday, August 13th, 2010 15:55
Cufon works really well, yet to try google font api.
Simon Day
Friday, August 13th, 2010 14:49
The Google Font API is really exciting and I’m hoping the font collection will start to grow.
I’ve never been keen on Cufon or sIFR so with the number of alternatives coming online there is an increasing amount of options to choose from.
ZoeF
Friday, August 13th, 2010 13:13
How about loading in fonts threw php? It cuts out the middle man and it doesn’t limit you to what font some site or anything else has. It just limits you to what fonts you upload on your server.
Matthew Corner
Sunday, August 15th, 2010 22:19
Then they’re output as images so it doesn’t really help as its not selectable etc.
sergey
Friday, August 13th, 2010 13:45
one must keep in mind font licensing…
it can really come back and bite you in the butt if font publishers will start scanning for font use, just like stock websites eventually figured out that approach
personally, I found font squirrel to be the simplest solution :)
PhamKy
Friday, August 13th, 2010 14:57
I’m using Cufon! Google API is easy to use but not much fonts :)
Jayson Brown
Friday, August 13th, 2010 15:55
Awesome article Matt, Thanks!
Matt Walker
Friday, October 8th, 2010 01:09
I love Font Squirrel and Google Fonts. But the issue with all these replacements techniques is that none have the ability to be printed in Firefox. It seems to work in IE but not in firefox. I’ve found it very frustrating because I’ve created a page where you can change fonts and resize text dynamically to personalise your page but then you can’t print it. Back to the drawing board I think.
Dimitar Georgiev
Monday, March 26th, 2012 23:17
Really great info. Thanks dude! I used to use Cufon, but now i prefer mostly Google Fonts.
Guilherme Moreira
Monday, August 16th, 2010 14:03
I didn’t like the font number limitation of Google API, I’m using Cufón right now and it satisfy my needings. W/ cufón I can use any font I want, so it’s a great advantage over the Google solution.
Dan
Monday, August 16th, 2010 13:11
Thanks for this article, very useful
However I’m slightly worried about a major element of my site (the typography) relying on a third parties web service…
Should I be worried ?
Alvin
Friday, August 13th, 2010 16:07
I only use google font directory and it works well… typekit is great but premium so I don’t use it :)
Nice article btw :)
Andrew Follett
Saturday, August 14th, 2010 00:01
Thanks Matt! Some alternatives to Typekit include FontsLive (http://www.fontslive.com) and the nearly launched Webtype (http://www.webtype.com), a premium webfont service.