Adventures with @font-face

Earlier this year I was pondering on how I might be able to use a custom font on a website on the entire text of the site rather than via inline or background images. It was only a passing thought, whilst I was away from a computer screen and it was quickly forgotten.

However, more recently through the brilliant bulletproof @font-face implementation article by Paul Irish and Arekibo’s post I have become aware of the @font-face CSS property and to its ever growing potential.

Font declaration

To begin with, I followed exactly what Paul Irish said in his article above and gave it a go. For this I chose the Fell Types by Igino Marini, as I quite like those fonts and Igino has kindly stated that they are free to use, even for font embedding. Other fonts are available for embedding, so take your pick.

I decided to use the Fell English type, and to create a font-face declaration for each of the regular, bold and italic variations. First of all however, I had to convert the fonts themselves into the required types. The files were supplied in TTF (True Type) format and whilst many of the other browsers are happy with this, Internet Explorer requires the OFT (Open Font) format, and Paul Irish suggested using the EOT (Embedded OpenType) format, I wanted to try that. A quick Google search revealed the Online Font Converter which I used to generate the fonts.

@font-face {
font-family:'IMFELLEnglishRegular';
src:url('../fonts/FeENrm2.eot');
src:local('IM FELL English Regular'), local('IM_FELL_English_Roman'), url('../fonts/FeENrm2.otf') format('opentype');
}
@font-face {
font-family:'IMFELLEnglishBold';
src:url('../fonts/FeENsc2.eot');
src:local('IM FELL English Bold'), local('IM_FELL_English_Roman_SC'), url('../fonts/FeENsc2.otf') format('opentype');
}
@font-face {
font-family:'IMFELLEnglishItalic';
src:url('../fonts/FeENit2.eot');
src:local('IM FELL English Italic'), local('IM_FELL_English_Italic'), url('../fonts/FeENit2.otf') format('opentype');
}

The eot font will be used for Internet Explorer, and everything else will first of all check if the specified font is availabe on the local system already, and if not, it will download it. Simple.

A quick note on font names and how to find them. One thing that Paul mentions in his article, is entering two names for the same font for local font declarations (as you can see above in the example). The reason for this is that some browers refer to the font’s actual name, whilst others refer to its PostScript name. For a good article on how to find these names try beautiful fonts with font face. In a nutshell:

Back to the code…further CSS was written to use the newly defined fonts as follows:

.fellLarge,.fellRegular { font-family: 'IMFELLEnglishRegular';}
.fellLargeBold,.fellRegularBold { font-family: 'IMFELLEnglishBold'; }
.fellLargeItalic,.fellRegularItalic { font-family: 'IMFELLEnglishItalic'; }
.fellLarge,.fellLargeBold,.fellLargeItalic { font-size:3em; }
.fellRegular,.fellRegularBold,.fellRegularItalic { font-size:1em; }

These can then be used with simple HTML to display the required text in the required font:

<div class="fellLargeBold">This is IM FELL Large Bold</div>
<div class="fellRegular">This is IM FELL Regular</div>
<div class="fellRegularItalic">This is IM FELL Regular Italic</div>

And it all works. Well, not really, it didn’t.

Some issues

Everything worked fine in Firefox 3.5.6, Safari 4.0.4, Opera 10.10 and Chrome. But not in Internet Explorer. In IE, fellRegular was fine, but neither fellLargeBold nor fellRegularBold were recognised and fellRegularItalic and fellLargeItalic were sometimes being recognised as fellRegular or fellRegularBold respectively, or not at all.

I checked and double checked the CSS definitions and all was well. I couldn’t figure out what the issue was. Then I thought that it might be the font file itself. So I found another font converstion tool, which is actually more than that, in the wonderful Font Squirrel which is a complete @font-face generator. You basically upload your font files and it’ll create a zip file for you containing the converted font files, CSS code and demo HTML. You can also get it to create and use woff font files (for Firefox 3.6) and svg fonts (for Safari and iPhone).

And it “just works”.

I tested the supplied code in Internet Explorer 6, 7, and 8, Firefox 3.5.6, Safari 4.0.4, and Opera 10.10 and all of them displayed the fonts correctly.

But before I show you the generated code, a quick word on the font issue mentioned above. I substituted the font files generated by Font Squirrel for the ones generated by the Online Font Converter, and they worked fine. It was indeed the font files that the Online Font Converter generated that were causing the problem, so I’d recommend using Font Squirrel for converting the fonts, and you get the rest of the code as well which just works and you can use it as a learning tool.

The code that works

The CSS @font-face declarations produced by Font Squirrel are show below, although I have changed the locations of the fonts themselves. There’s also some extra CSS for styling the test page.

@font-face {
font-family:'IMFELLEnglishRegular';
src:url('../fonts/FeENrm2.eot');
src: local('IM FELL English Regular'), local('IM_FELL_English_Roman'), url('../fonts/FeENrm2.woff') format('woff'), url('../fonts/FeENrm2.otf') format('opentype'), url('../fonts/FeENrm2.svg#IM_FELL_English_Roman') format('svg');
}
@font-face {
font-family:'IMFELLEnglishBold';
src:url('../fonts/FeENsc2.eot');
src: local('IM FELL English Bold'), local('IM_FELL_English_Roman_SC'), url('../fonts/FeENsc2.woff') format('woff'), url('../fonts/FeENsc2.otf') format('opentype'), url('../fonts/FeENsc2.svg#IM_FELL_English_Roman_SC') format('svg');
}
@font-face {
font-family:'IMFELLEnglishItalic';
src:url('../fonts/FeENit2.eot');
src: local('IM FELL English Italic'), local('IM_FELL_English_Italic'), url('../fonts/FeENit2.woff') format('woff'), url('../fonts/FeENit2.otf') format('opentype'), url('../fonts/FeENit2.svg#IM_FELL_English_Italic') format('svg');
}
.fellLarge,.fellRegular { font-family:'IMFELLEnglishRegular', sans-serif; }
.fellLargeBold,.fellRegularBold { font-family:'IMFELLEnglishBold', sans-serif; }
.fellLargeItalic,.fellRegularItalic { font-family:'IMFELLEnglishItalic', sans-serif; }
.fellLarge,.fellLargeBold,.fellLargeItalic { font-size:3em; }
.fellRegular,.fellRegularBold,.fellRegularItalic { font-size:1em; }

You can see the result of this at @font-face :: IM FELL English and can of course view the source code via your browser. As an added bonus, the page itself also uses HTML5.

In the end

Ultimately I’ve been quite surprise at the power of @font-face and its ease of use. The big problem is still the absence of fonts that a developer can use for embedding since the file itself ends up being downloaded (Shaddapp@font-face!!! covers this topic well) and licences tend not to cover that. With that in mind, I’ll still aim to use @font-face as and where I can and suggest you do the same.