@font-face

What it does:

Allows you to use fonts other than those installed on your user’s computer on your web pages.

Supported by:

Firefox 3.1, Safari 3, Opera 10, IE4+ (for Windows, note IE uses different format for fonts)

Not support by:

Chrome, Firefox 3, Safari 2, Opera 9

What happens when @font-face is not supported:

The next font-family in the list is used, so you need to ensure a suitable second choice font that is likely to be installed on your visitors computer is next in the list of fonts.

History:

Back in middle of the browser wars in 1997, MS introduced the then proposed CSS2 property @font-face with IE4. Like the button element which first became available with IE4, @font-face never can into popular use. Why?

  • Netscape choose to support the alternative TruDoc format instead
  • .eot files are a non-standard format, (though in 2008 Microsoft made a submission to the W3C to adopt .eot)
  • .eot files can be difficult to create (more on this later)
  • users will have download the font file and in 1997 with almost everyone on dialup this added considerable weight to the page.

Well in 2007, Webkit announced support for @font-face, which was included in CSS2 recommendations in 1998. This time the open source philosophy reigned and they choose to support the standard TTF and OTF formats. Safari, Firefox and Opera all followed within 12 months.

Issues

You need to deliver two different font formats to two different browsers, though that as not difficult as it seems.

Some font files and particularly TTF files can be large, with some exceeding 1Mb.

Not all fonts work with all browsers, while experimenting I found a number of fonts both TTF and OTF that Opera 10 alpha on OS X refused to load and a few of those did not load in Opera 10 alpha on XP.

Creating .eot is a interesting challenge. I wasted a few hours with WEFT tool on Vista repeatedly crashing, I finally created a number of invalid .eot files. So I ended up using the WEFT tool with XP to successfully create .eot files and it only crashed once. Please don’t ask me for help with WEFT, it was just a trial and lots of errors experience and I do not have easy access to XP.

The WEFT tool only works with TTF files. So unless you can convert OTF files to TTF, you can not use OTF files with IE.

Font licensing is a complex issue, I would suggest reading for and against standardizing font embedding by Bert Bos as a starting point. Personally I am taking a long hard look at the licence when I download a free font from the web to use. If the licence is unsuitable I do not install the font. I am currently going back through my font library and hunting down the licences for each font and reading them carefully before deciding to keep the font.

Writing the code

There are a few of issues here,

IE will download all EOT, TTF and OTF fonts declared with @font-face even though it can only use EOT fonts.

Webkit, Firefox, Safari and Opera will download all EOT, TTF and OTF fonts declared with @font-face even though it can not use EOT fonts.

If you declare an EOT font for a font-family already declared with a TTF or OTF file, that font-family is no longer usable in Firefox. However the reverse does not appear to be true for IE.

If you use a font-family name and that is the name of font already installed on a visitor’s computer, the computer will used the installed font instead of downloading.

So after after some thought and a little experimentation, this is how I will be using @font-face:

<!--[if IE]>
<style type="text/css" media="all">
@font-face { 
	font-family: Bleeding Cowboys; 
    font-style:  normal;
    font-weight: normal;
	src: url('BLEEDIN0.eot') !important; 
}
</style>
<![endif]-->
<style type="text/css" media="all">
@font-face { 
	font-family: Bleeding Cowboys;
	font-style:  normal;
    font-weight: normal; 
	src: url('Bleeding_Cowboys.ttf'); 
}
h1 {
	font-family: Bleeding Cowboys, 'Bleeding Cowboys', 2nd choice, serif;	
}
</style>

The logic is:

  1. Use conditional comments to feed the EOT font to IE only.
  2. Use !important so IE will ignore any future declarations of src for that font-family.
  3. Provide the TTF file for other browsers to use.
  4. Use the normal name for the font, so people who already have that font will not have to download it a second time.
  5. Provide a suitable alternative for browsers that do not support @font-family

Example

A typographers worst nightmare Using InkedGod for headings, Bleeding Cowboys for body text, both faces I adore in the right place. Note neither font works with Opera 10 alpha on a Mac(you get your default fonts) and Impact for browsers that do not support it. Screenshots Safari 3, Firefox 3.1beta, IE7 which support @font-face, Opera 10 alpha on a Mac with default fonts, Firefox 3 and Chrome which do not support @font-face and display impact.

Will I use it now?

I will definitely use @font-face when I redesign this blog and for any suitable projects before then, if I can get access to the WEFT tool on XP. At the moment, depending on the site between 50% and 90% of visitor’s browsers support @font-face. Once Firefox3.1 in released that will rise to around 90% to 95% within a couple of months.

There are a couple of exceptions :

I will not use it just for a logo, if image replacement or flash provide a light weight alternative

I will be extremely cautious about using @font-face for large amounts of body text. While there is a large number of suitable fonts for display (heading) text available with the right licence to use with @font-face. For long sections of text, I will stick to the best type for that job of reading online and that is usually already installed on most people’s computers.

51 Responses to “@font-face”

  1. @font-face kullanımı • Teknozzi.com Says:

    […] […]

Google