Reference Rendering
The reference rendering shows the fully @font-face'd version (left) and the fallback version (right).
View source for more implementation details. The gist: this is the laziest, most practical implementation, with least code used. There's no superfluous font-weight:normal specified, as browsers should take this as implied. This used to be a problem in browsers, but they've improved! (See results & browser support table below)
This is how your browser performs in the test: (explanation follows below)
“Why would you close the pen?”, the fox blasted. “I thought you believed the threat was fictitious?”
“N.N..No, not really”, said the chicken who was freaking out!
(ID=1)
“Why would you close the pen?”, the fox blasted. “I thought you believed the threat was fictitious?”
“N.N..No, not really”, said the chicken who was freaking out!
(ID=2)
“Why would you close the pen?”, the fox blasted. “I thought you believed the threat was fictitious?”
“N.N..No, not really”, said the chicken who was freaking out!
(ID=3)
Normal, Bold, Italic, Bold Italic & Small-Caps in the text and all with special @font-face'd font-files for each and every option.
Note that "out!" uses a Small-Caps font version directly, while "freaking" should use the same version, indirectly.
Normal, Bold, Italic, Bold Italic & Small-Caps in the text, but only the Regular font has as an @font-face'd file available.
It would be most helpful if browsers derived (synthesized) the Bold, Italic, Bold Italic and Small-Caps versions from this Regular style, just as they do with system fonts.
Note that "out!" uses a Small-Caps font version directly, while "freaking" should use a Regular-font-derived version.
Normal, Bold, Italic, Bold Italic & Small-Caps in the text, no @font-face'd font available.
How current browsers render the test case above, compared to the reference rendering.
| Firefox 3.6 | Safari 4 | Chrome 5 | Opera 10.5a | |
|---|---|---|---|---|
| Regular (Normal) | Yes | Yes | Yes | Yes |
| Italic | Yes | Yes | Yes | Yes |
| Bold | Yes | Yes | Yes | Yes |
| Bold-Italic | Yes | Yes | Yes | Yes |
| Small-Caps | Emulates[3] | Fallback system-font | Fallback system-font | Emulates[3] |
| Extras? | Ligatures![1] | - | - | Ligatures![1] |
[0] Note on Ligatures: The font must of course include ligatures to work. The font used here, Fontin Sans, does.
[1] Note on Ligatures: In Firefox, ligatures are not enabled when letter-spacing is set to values other than 0. Opera does, even when letter-spacing:10px; is set, for example.
[3] Note on Small-Caps: Firefox 3.6 & Opera 10.5a ignore the text-variant property in the @font-face declaration, so put it before defining the regular (normal) style, otherwise all regular text will be in small-caps. Safari 4 (?) & Chrome 5 don't have this problem.
[4] A novel way of forcing browsers to (seemingly) emulate Small-Caps is to use uppercase with a small font size. It's a bit weird but it get the job done (kinda) reasonably. Joe Clark explains in this test case of the method. It won't look as good as browsers emulating Small-Caps themselves, though.
| Firefox 3.6 | Safari 4 | Chrome 5 | Opera 10.5a | |
|---|---|---|---|---|
| Regular (Normal) | (implied) | (implied) | (implied) | (implied) |
| Italic | Yes | Fallback to regular-style | Fallback to regular-style | Fallback to regular-style |
| Bold | Yes | Fallback to regular-style | Fallback to regular-style | Fallback to regular-style |
| Bold-Italic | Yes | Fallback to regular-style | Fallback to regular-style | Fallback to regular-style |
| Small-Caps | Yes | Fallback system-font | Fallback system-font | Yes |
| Extras? | Ligatures![1+2] | - | - | Ligatures![1+2] |
[2] Note on ligatures: On emulated (synthetic) styles, the ligature styles from the regular version are used. See the Firefox screenshot.
The reference rendering shows the fully @font-face'd version (left) and the fallback version (right).
Opera picks up and applies the Regular, Bold, Italic and Bold Italic versions without a hitch, but fails to pick up Small-Caps indirectly (via text-variant:small-caps) but does extrapolate a Small-Caps version from the Regular font. Opera doesn't extrapolate Bold, Italic nor Bold Italic, as can be seen in Scenario 2.
Chrome 'gets' Regular, Bold, Italic and Bold Italic, but uses the fallback font (Georgia) to extrapolate a Small-Caps version. Chrome doesn't extrapolate Bold, Italic nor Bold Italic either, as can be seen in Scenario 2.
Safari renders the testcase exactly the same at the moment, as it's based on almost exactly the same version of Webkit.
Firefox really gets the fonts – ligatures and all (see the fi in fictitious). Firefox does extrapolate Bold, Italic and Bold Italic, as well as Small-Caps when specified indirectly (via text-variant:small-caps). Shame Firefox doesn't pick up the font file specified for Small-Caps via text-variant:small-caps. Other than that, the implementation is practically perfect.
Seamonkey 2.0 (the old Mozilla Suite) uses nearly the same Gecko version, and displays the test-case the same as Firefox 3.5. Firefox 3.6 displays the test-case exactly the same too.
Firefox 3.7 might be getting even more font control!
Test case composed by James John Malcolm. Version 2010/02/11. Feedback via @jamesjm on Twitter or in the comments section of the accompanying journal post here.
Font used: Fontin Sans by Jos Buivenga and Georgia by Microsoft.
2010/02/24: Added notes on ligatures and small-caps.
2010/02/22: Updated Opera results to 10.5a (build 8258). Ligatures!
2010/02/11: Added browser support tables for native and emulating @font-face rendering.
2009/12/02: Tidy'd up version. Initial publication online.
The text on this page is big, because who reads small print?