This series of articles is about the challenges that arise when using @font-face. Font licensing is one (that many others have written about) and the file-size of included font-files is another, but this article is about browser implementation eccentricities. I’ll start off by showing the ideal @font-face implementation in this article, before moving on to showing current browser deficiencies and the implementation I settled on for including a full font-family which works in the here and now.
update: For an overview of current browser support for CSS3’s @font-face see the browser support tables.
Ideally, designers would specify the font-file they wanted to use for regular text, and then one for each variation they had at their disposal (so, one for Bold, Italic, Bold Italic, Small Caps, Light, Ultra Condensed, etc.) – all using the same font-family name, so that all variations would be picked up automatically for body text, and, if @font-face isn’t supported by the browser, all text will still display in the proper font-variant.
To do that, your css would look something like this:
/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */
@font-face {font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_R_45b.otf) format("opentype");
}
@font-face {font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_B_45b.otf) format("opentype");
font-weight: bold;
}
@font-face {font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_I_45b.otf) format("opentype");
font-style: italic;
}
@font-face {font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_BI_45b.otf) format("opentype");
font-style: italic;
font-weight: bold;
}
@font-face {font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_SC_45b.otf) format("opentype");
font-variant: small-caps;
}
This would ensure proper fall-back in browsers that don’t support @font-face (or only part of it) and compatibility with current stylesheets, making @font-face implementation for designers plug-&-play.
The ideal @font-face rendering (on the left) and fall-back rendering (on the right) would look a little like this (notice the fi-ligature!):
You’ll have guessed by now that browsers haven’t reached this ideal implementation yet. You can find the test-case and CSS3 @font-face browser support tables here.
Information in this series was acquired while working on the design and css for the site of Standards.next and subsequent tests afterwards. The Fontface used in this example is Fontin Sans by Exljbris (Jos Buivenga).