It’s time to update the CSS3 @font-face browser sup­port table. It doc­u­ments spe­cific­ally how browsers act when either the whole font fam­ily is spe­cified (reg­u­lar, italic, bold, bold-italic & small-caps) or only the reg­u­lar ver­sion of the font is spe­cified. The test-case that this based on uses the ideal, easi­est (lazi­est) imple­ment­a­tion and can be found on its own page here.

This is a robust­ness test. What hap­pens if some font vari­ants don’t load? What if there’s only one vari­ant to begin with? Will inform­a­tion be lost? Those ques­tions can be answered with this test.

Here’s the res­ults of how browsers in 2012 render the test case, com­pared to the ref­er­ence ren­der­ing. Mobile browsers have been added too.

Can the browser pick up the style natively?

How are mobile browsers with nat­ive variants?

Conclusion: Many browsers (Chrome, Opera) have made tre­mend­ous pro­gress. Only Safari is still lack­ing in its imple­ment­a­tion, in the edge case where Small-Caps text has added emphasis. IE 10 goes the curi­ous route of emu­lat­ing all vari­ants and styles from the reg­u­lar version.

Can the browser emu­late from the reg­u­lar version?

Do mobile browsers emu­late properly?

Conclusion: Safari and most mobile browsers still fall back to reg­u­lar style. This means web developers can not use web fonts for body text if they have only one (reg­u­lar) vari­ant nat­ively avail­able to them.

The most up to date sup­port table, with pretty col­ours, can always be found on its own page along­side the test case. It also has more notes on lig­at­ures and small-caps support.

Why is fall­ing back to reg­u­lar style so bad?

It makes sen­tences full of expres­sion look like sen­tences full of expres­sion. It removes part of the typo­graph­ical ele­ments of a text, which is ironic, given that @font-face is meant to embel­lish it typo­graph­ic­ally. At its core, fall­ing back to reg­u­lar style removes information.

So what does this mean we should do?

Browser developers:

• Safari devs: please work on emu­lat­ing 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 pick­ing 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 for­ward, but it’d be a pity to stop there.
• If HTML 5 has taught us any­thing, it’s that browsers should be more bul­let­proof, not web designer’s code. Also: ask­ing web developers to spe­cify as little as pos­sible is a better.

Web design­ers:

• Using @font-face when you only have the reg­u­lar ver­sion of a font at your dis­posal is not a good idea. Especially for body text. In safari. And on nearly all mobile platforms.
• Using a (less lazy, less prac­tical) more bul­let­proof way of spe­cify­ing your @font-face fonts is recom­men­ded (alas) for now.