In this article I’m going to address the issues, backed up with results and findings from my own experience in font-replacement and numerous client requests for a custom font. This article is aimed at the designer/developer who wishes to experiment with custom fonts.

Outlining Your Requirements

To start with, it’s important to understand what your actual requirements are for a custom font within a project.

What type of project is it? Personal, or client based? is it going to be profitable?

The main part of that question is in the profitability part, if yes, then check the licensing information that comes with the font you decide upon, because even if it’s free to use, it doesn’t guarantee it’s allowed in a profitable capacity. If you pay for a font, it doesn’t necessarily mean you’re protected, because generally the license means no re-distribution and so that makes using @font-face a bit of a grey area, I’ll explain more on that later.

Why are you using a custom font?

I’d look firstly at whether this is crucial? In a recent project we decided it wasn’t and so used a web-safe font instead which in the end gave a similar result. So in that respect try playing around with some web-safe fonts to get varied results.

How degradable do you want your site to be?

Some of the methods below use external scripts and so won’t be usable by every user on every browser. You can always provide a backup websafe font – or you can add a few levels of degradability.

Browser Usage – August 2010

Ok, now we have that out the way let’s start of with some tasty (or rather not) browser trends, usage etc… (As of August 2010)

Wiki

NetMarketShare

W3C

(Personally I have never really trusted W3C results as golden, as they always seem to be off the mark in comparison to other resources)

Recent Client Project served Globally

IE 6 20.0%  /  IE 7 18.6%  /  IE 8 31.5%   =  70.1%

FireFox 3.6 11.5%  /  3.5 2.2%  /  3.0 1.1%   =  14.9%

Chrome 5.8%

Safari 3.4%

Opera 0.7%

IE6 Support

With recent movements in the “Kill IE6 camp” it would perhaps seem acceptable to completely write-off IE6, but looking at our own results & the above usage,  it shows IE6 is still a dominant player and worth while supporting. Especially when you take into consideration the people actually using IE6, from our own research on global websites, China is a clear user of IE6 with most of their banking systems reliant on it.A lot of the population are unaware of the other browser options. This also goes for users closer to our shores so why be so brutal with the IE6 ‘Ban-Hammer’ and stopping people from viewing rich content, when 80% of the time it only takes a few small steps for overall support, from a personal point of view I believe it to be advantageous to try and support IE6 if not create a nice degrading site. ( added note, we’ve been known to add a kind ‘poke’ on our sites suggesting to our users the usage of other browsers, People prefer being helped than forced! ).

Websafe Fonts

The basic approach which has been used for years, and has no real issues apart from slightly different rendering outcomes across browsers. The main hang-up is finding what each font is called across each OS. For example in Windows ‘Lucida Console’ is ‘Monaco’ on the Mac, so always make sure you cover all the alternatives in your font-stack. The reason why this method works so well is that the fonts are installed with the original OS so unless the user has actively deleted the font they should have it.Check out this page for a nice table of web-safe fonts and links to how they are rendered.

Usage

Web-safe fonts can be installed via a basic CSS font-stack.

In the above font-stack I have declared versions for both windows/mac font types so there is a fall back for both OS.

Advantages

• No copyright infringements
• Easy to use
• Non-reliant on external scripts, files…
• Supported across all browsers
• Sometimes the best results in cross-browser viewing

Disadvantages

• Very limited font options

Summary

So in conclusion, if your looking for a no-frills font, or one of the limited web-safe font’s suits your sites design then GREAT!! go for web-safe and the installation mentioned above. You will get the best results without having to worry about any annoyances such as usage rights. As an example one of our more recent projects the client requested a custom font, which we decided would not be suitable to implement so we used the standard ‘Arial Black’ which came out really well after some letter-spacing.

Font-Face:

Font-Face is a font-embedding method that enables the developer to host the font on their website allowing users who don’t have the font on their machine to cache a version and render the site appropriately. Font-face is actually part of CSS2 requirements and has been supported for 10 years+, it’s main draw back is the fact that a lot of fonts are protected by copyright and come with explicit details on usage. Like most online material you’re allowed to use .TTF, OTF etc…. for a personal/non-profit use, but once they are used otherwise, it gets a little sticky.

Usage

Firstly decide which font you want to use, for this example I’m going to use the‘Lobster” font. Next is to obtain a copy of this font (Be warned, obviously if the font is freely downloadable everything is sorted, if it’s a paid font, then you have to pay for it, no way around this unfortunately.).

At this point I’ll explain the differences between font format. Now in an ideal world all the browsers would support .OTF or TTF as they are freely available. Unfortunately its not an ideal world and low and behold IE is putting its spanner in the works again. IE WON’T support any format other than its own .EOT (Embedded OpenType), the reason being is .EOT was created to stop unlawful downloading of said fonts and are created by using original .OTF fonts.

To create an .EOT you previously had to download an old program which did it for you, but now there is an awesome resource called Font-Squirrell, I can’t describe how useful this site is, check it out.

Go to site and the @font-face Generator tab.

Click on the “add Fonts” button, and select your chosen font. Now once uploaded you can either select “EASY” or “EXPERT..” for this demo I am going to use the easy option, but if your only wanting certain files be sure to check out the expert option.

Once you’ve agreed to the T&C’s your free to download your kit!Inside the download .zip, you should have 6 files, (demo.html, .eot, .svg, .ttf, .woff, stylesheet.css), see what I mean about how awesome Font-Squirrell is?

You’ll need to place these files into your project, make sure you use the correct paths.

Installation

The installation is simply a matter of some CSS variables at the top of your stylesheet.

This will make the font available for you to apply to any elements you wish, like thus

If you wanted to specify different @font-face rules, its simply a matter of duplicating the above codeAnd that’s it! the hardest part of setting up font-face is obtaining the different formats, but now Font-Squirrell is about, its a piece of cake.

Advantages

• Can use any font (as long as its free & for a non-profit project – Always check the font’s usage rules)
• No need for any external plugins, flash, javascript etc…
• Quicker than SiFR, Cufon
• Fully SEO friendly, indexable
• Very quick to load
• Can have standard / css3 text-effects applied

Disadvantages

• License issues, fonts can be directly downloaded from site (Not an issue for non-profit sites)
• Not fully supported across all browser versions (only latest version of Firefox)

Browsers Supported

• IE 4 +
• Mozilla Firefox 3.5+
• Safari 3.1+
• Opera 10+
• Chrome 4.0+ (stable)

Summary

Always make sure it’s at the top of your stylesheet and the first .css called, otherwise it will display default text first. Font-face is, in my mind the future of font-embedding, there are more and more methods popping up all over the place every month, making use of javascript and other methods to encrypt the fonts so avoiding any licensing issues.

Cufon

A image replacement method, using javascript to convert text into a svg (scalabled vectored graphic), then a VML (Virtual markup language). Which then produces an image representing the original piece of text. Now I’m not going to go into a lot of detail on Cufon, as well as SiFr as in all honesty my knowledge of these methods is limited and from what I have experienced they tend to be very tricky to implement and can be very buggy at times.For a simple overview check out this github post

Advantages

• ‘Fewer’ License issues as the text isn’t selectable, HOWEVER it could potentially be reversed engineered to get the font, but extremely hard.
• Can use any font
• Quicker than SiFr
• As it’s javascript based, It doesn’t effect SEO as search engines read the un-formatted code.

Disadvantages

• Text isn’t selectable, so useless for body copy
• Needs javascript to run
• If not properly implemented, shows default font before cufon images are loaded
• Violates EULA due to font being embedded
• Relatively no scope for text-effects

Browsers Supported

• ALL

Summary

Cufon is a tricky one, on the one hand it is faster and on the hole a lighter implementation than Sifr, but personally I don’t believe it is a method thats going to stick around one font-face gets into full swing.

SiFr ( Scalable Inman Flash Replacement )

Uses flash to replace text with small flash files displaying a character each

Advantages

• ‘Fewer’ License issues, HOWEVER it could potentially be reversed engineered to get the font, but extremely hard.
• Can use any font
• Is fully indexible
• Can add text effects
  

Disadvantages

• Slower than traditional methods & Cufon
• Requires a Flash & Javascript
• shows default font whilst swf’s are loaded
• Not ideal for large copy as places a huge amount of demand on computer
• Violates EULA due to font being embedded

Browsers Supported

• ALL

Summary

Much like Cufon, the disadvantages outweigh it’s positives, I can’t see myself ever using these methods again. Personally I’d rather look at re-assessing the design if a custom font was needed before using these and in the process create a more accessible/degradable site.

Google Font API

Google’s Api Font Library is relatively new in the past year, using font-face Google have started to host their own fonts, sending out only the required font site & weight. It’s as easy to install as font-face, if not easier as you don’t need to worry about creating the fonts.

Usage

First of all, go to Google Font Directory, and select the font you want. I like the Josefin Sans Std Light so will use that to demo. There is a font-previewer which I find really useful to see how the font renders in different browsers ( note, they do tend to differ too, as some fonts I have found look great in some browsers and in others don’t cut the mustard ).Once your settled on your font, you can download the code

Part 1

You need to place this into your page !!important!! Make sure this is the first element on the page, otherwise it can cause the page to load the font last, thus showing default fonts first.

Part 2

After placing the link to the googleApi, it’s a simple task of calling the proper css declaration on the elements you wanted to render in that font, thats it!

Advantages

• No need for any external plugins, flash, javascript etc…
• Quicker than SiFR, Cufon
• Fully SEO friendly, indexable
• Very quick to load
• Can have standard / css3 text-effects applied
• No License issues as font is hosted in cloud

Disadvantages

• Limited amount of font’s currently available
• Quality of renders in different browsers can be a bit different

Browsers Supported

• IE 6 +
• Mozilla Firefox 3.5+
• Safari 3.1+
• Opera 10.5+
• Chrome 4.2+ (stable)

Summary

I really like the idea of the google Api, and have used it a few times already. The only thing that really lets itself down is the current amount of font’s available, this is going to be increased in time, but as it stands is limited. If your looking for a legal, quick and easy way to implement a font, and are not that fussed about minor discrepancies across browsers, then I suggest you give this a go as it’s very good ( assuming there is a font you like! ).

Final Conclusion

This article aim was to inform you some of the methods of font serving out there, based on experiences I have had in the process. Hopefully it gives you a better idea about how to approach font-embedding. From my point of view, which is reflected by the shear amount of services cropping up using font-face, I believe it is the way forward and the most direct approach to font-embedding. It’s quick, fully indexible so great for SEO & accessibility, the only real downside is the legal issues it currently faces. If your wanting a font for your personal “non-profitable” site, I’d go for a font-face based method, even if it’s for a profitable site there are new services such as Typekit providing annual subscriptions to host fonts.Cheers!

C.

Other Methods

I only covered a few methods in the above post, and in retrospect, a couple of old and possibly defunct ways. There are lots of other methods / services out there that the choice is massive, here is a quick summary of those.

Font-Deck

This I think is the one to watch, it requires no javascript, no external plugins, nothing! based on font-face it hosts the font on a secure server much like google’s API but the fact it already has lots of fonts available is a advantage, However it does charge a premium for the usage.

TypeKit

Much like google’s Api, Typekit looks to serve fonts securely, taking away the problem of legalities. There is a basic service available at no charge, however it does require a ribbon to be placed on your site. Requires javascript though.

FLIR

Resources

Some links to services used & other really useful posts on the topicFont-Squirrell – Brilliant for generating @font-face codeSmashing Magazine’s review of font-embedding services This is a great post, take a look for loads of other font-face services.I’d like to mention the follow articles that I have found very useful in recent font embedding projects.The Excellent talk “Practical steps for using @font-face in your websites now” by Jay barry of Period Three on CSS and the @font-face rule, I’ll only be skimming most methods so for a more indepth explanation please check out his post.For more info about font formats and such check out Richard Fink’s post “Web Fonts at the Crossing”