The explanation

The results: CSS3 @font-face support tables & Renderings

How current browsers render the test case above, compared to the reference rendering.

Can the browser pick up the style natively?

[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. IE 10 needs extra code to enable these

[2] 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.

[3] Opera looses the Small-Caps when the Small-Caps font is applied to text directly (line 3 of 2nd paragraph of test-case) when styles are applied. It falls back the regular version of those styles. Thus, what should be Small-Caps bold, becomes regular bold. Weird.

Can mobile browsers pick up the style natively?

Can the browser emulate (synthesize) from the regular version?

[*] Note on ligatures: On emulated (synthetic) styles, the ligature styles from the regular version are used. See the Firefox screenshot.

Can mobile browsers emulate (synthesize) from the regular version?

Why is falling back to regular style so bad?

It makes sentences full of expression look like sentences full of expression. It removes part of the typographical elements of a text, which is ironic, given that @font-face is meant to embellish it typographically. At its core, falling back to regular style removes information.

So what does this mean should we do?

Browser developers:

• Safari devs: please work on emulating bold, italic, bold-italic, etc. when they're not present. Browsers do this already when it comes to system-fonts, which means web developers expect this to work.
• Also give some thought to picking up "font-variant:small-caps;" in your @font-face code. It's the only way to ensure proper fall-back. Emulating, (like Firefox & Opera you all now do!) is a step forward, but it'd be a pity to stop there.
• If HTML 5 has taught us anything, it's that browsers should be more bulletproof, not web designer's code. Also: asking web developers to specify as little as possible is a better.

Web designers:

• Using @font-face when you only have the regular version of a font at your disposal is not a good idea. Especially for body text. In safari. And on nearly all mobile platforms.
• Using a (less lazy, less practical) more bulletproof way of specifying your @font-face fonts is recommended (alas) for now.

Chrome 19 (mac)

Description: Chrome 19 has no problem with the first paragraph in scenario 1. It doesn't support ligatures (yet?), but those aren't essential to have. The second, Small-Caps, paragraph shows that Chrome doesn't pick up an @font-face rule with font-variant in it, which is a shame, but it isn't the css spec, so it's really a spec problem. Chrome does extrapolate regular-, italic-, bold-, bold-italic-Small-Caps versions from the regular font (line 1, second paragraph), albeit at a smaller size than the actual Small-Caps (line 3, 2nd paragraph). The Smaller-Uppercase method produces a very nice faux Small-Caps. The bold and bold-italic styles in particular are rather good.

Areas for improvement: I'd make the synthetic italic variants slightly less slanted. Also, the Small-Caps could do with being slightly larger.

Rating: A

Firefox 14 (mac)

Description: Firefox 14 has no problem extrapolating synthetic variants from the available fonts. It's bold and bold-italic are a little too bold for my liking, but it's only noticeable in headlines. It is the only browser to support ligatures out-of-the-box (i.e. without doing anything special) and also offers even deeper font control.

Its small-caps is just the right size, and it manages to synthesize italic, bold & bold-italic variants very nicely. It's italic may be a little too slanted for my taste, but that's personal.

Areas for improvement: As said, the boldness of the bold and the slantedness of the italic could do with being turned down a little, it makes the bold-italic style stand out terribly. Maybe the header is being doubly emboldend?

Rating: A-

Safari 5 (mac)

Description: Safari 5 supports the bare minimum to make web fonts work. It doesn't synthesize anything, except the regular Small-Caps. Only the smaller-uppercase faux Small-Caps produces acceptable results.

Areas for improvement: Tons. Safari should extrapolate missing variants of fonts from the available ones. Right now, you loose all emphasis in a text if you only have the regular variant of a web font available to you. Unacceptable. Since Safari shares WebKit as a render with Chrome, there is some hope that Safari 6 may improve matters.

Rating: C

Opera 12 (mac)

Description: Opera 12 has very impressive rendering. Its extrapolated bold looks great in the headline as well as in the text. The synthesized Small-Caps and faux Small-Caps are very, very close to each other and very close to the font-designer supplied Small-Caps. It's very impressive. Ligatures don't work out of the box and the italic text is a little too slanted, but those are minor niggles.

Areas for improvement: Opera has come a long way and they're nearly there! It's only browser to not keep Small-Caps text in Small-Caps when styling is applied, so that's what they need to fix.

Rating: A

Internet Explorer 10 Consumer Preview (netrenderer.com)

Description: IE 10 has got a lot of great typographic features! Which is why it's a real shame IE doesn't pick up on font styles and variants properly. A quick test using a Google Web Font with regular, italic and bold included shows that IE 10 synthesizes the italic style, and probably the bold too. The good news is that the synthesizing of italic, bold and bold-italic and the various Small-Caps variants is rather good.

IE 10 doesn't apply ligatures out of the box, but is on feature level with Firefox on many nice opentype features. Enabling those features is cumbersome, ugly and complicated, which is a shame. I hope the CSS working group thinks up better solutions. Small-Caps is enabled in the same manner, which looses you backwards compatibility or even fallback compatibility.

Areas for improvement: IE needs to pick up on more than one style of a font and support a clean and easy @font-face implementation.

Rating: C

Safari on iOS 5 on iPhone 3GS

Description: Mobile Safari on iOS 5 does pick up font styles and variants when they're presented to it, but suffers from the same problem Safari on the desktop does: it doesn't extrapolate synthetic versions of the fonts it has. Instead it just uses the regular version. There's also a strange rendering quirk with the C going on, but that may be interaction between the font and the renderer (webkit).

Rating: C-

Opera Mobile 12

Description: Whilst the rendering is very crisp and nice, Opera Mobile 12 doesn't emulate any styles. It's a real shame, but I take it Opera Mobile uses an older version of Presto, their renderer, than Opera on the desktop does.

Rating: C

Android 2.1 on Google Nexus One (browserstack.com)

Description: Android 2.1, in a strange twist, does seem to synthesize italic, bold and bold-italic from the regular variant. However, it seems to only pick up the regular one! Whilst this is, in a way, preferable to what the future Android versions do (see below), as no typographical information is lost.

Rating: B

Android 2.3 on HTC Evo 3D (browserstack.com)

Rating: C

Android 4 (Chrome & Stock Browser) (via Joen)

Description: Android 4 sadly shows no progression over the earlier Android versions. It suffers from the same lack of font variant emulation as other WebKit (Safari) browsers. I do hope that in the future, the mobile Chrome browser will match its brother on the desktop.

Rating: C

The Changelog

2012/05/30: Completely new test, with added Small-Caps variations and IE 10.

2012/05/29: Added Firefox 14 (unchanged), Chrome 19 (improved), Safari 5 (slightly improved). See old results here.

2010/11/16: Added Firefox 4 OpenType features link & explanation in note [1b].

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 who

Test case composed by James John Malcolm. 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 & Trebuchet MS by Microsoft.