Avoid faux fonts

@blake @Jhanarato @Vimala

One little problem that has bugged me for a while is to avoid creating faux fonts in the browser. Normally if a font variant is specified, such as bold, italic, or small-caps, the browser will try to find the correct font, and if there isn’t one, they’ll just make it up by smearing, slanting or otherwise distorting the font. This is anathema to good typography, and we are normally careful to avoid it on SC. However there are a couple of cases where it happens, such as when there are inline italics in a heading, but more especially in the use of non-Roman fonts. These never have small-caps, rarely if ever italics, and sometimes not bold.

The hard way is to identify all of these cases, and all of the CSS rules that apply to them, and ensure that faux fonts are not called. Boring!

The cool way is to tell the browser, “Never make faux fonts”. And that is precisely the purpose of the new CSS property, font-synthesis.


So far it is Firefox only, but we can hope that it will roll out to other browsers. I’ll try enabling it on the body globally, let’s see if it creates any problems.

Well, file that under “escalated quickly”. On a text such as

the text begins with a .namo class, which is reserved for the “namo tassa…” which traditionally begins each text. This is italicized in Roman texts, and should not be in others. With font-synthesis enabled, it made no difference in Chrome, as expected. However, in Firefox, where it should work, it made the entire text appear in italics: exactly the opposite of the intended effect. I have now removed it.