Small caps not working in web fonts

The Realms of Gold's picture

Hi everyone,

I'm having a problem implementing OpenType features in web fonts. No matter what typeface or browser I use—and I've tried several of each—I can't get the CSS font-face property to listen to font-variant:small-caps. In every case, the browser synthesizes its own small caps by scaling the full caps, which of course looks terrible.

The typefaces I've tried with this are all open-source advanced fonts: Cabin, Cardo, Lato, and Sorts Mill Goudy, all of which support small caps at least in their roman, regular-weight face. I've used Firefox 5, Opera 11.5, and the latest build of Iron (Chrome without Big Brother), all to no avail.

It's worth mentioning that other properties of advanced web typography, such as automatic ligatures (as well as the font-face property itself), are all working.

You can see my test page at , and the CSS file at Any help would be greatly appreciated!


Typography.Guru's picture

There is no cross-browser support for this yet. That's why some webfont services and subsetting tools let you choose to subset the whole font (well at least the latin part) with small caps to give you a chance to use them.

In Firefox you can use small caps by calling the OpenType feature itself:

The Realms of Gold's picture

Update: apparently, the CSS3 specification that allows fonts to access their advanced glyphs apparently isn't fully implemented yet, even in Firefox, which is setting the standard for compliance. But Firefox has a hack built in, which is supposed to allow you to preview the ability of the browser to access these glyphs:

I tried the Mozilla-only workaround, thinking it would be nice if it worked in at least one browser. But the workaround never loaded any small caps at all. I've updated the test page to reflect that problem—look at the entries 2.1, 4.1, and 6.1:

The Realms of Gold's picture

Hi Ralf, good timing! I've seen that article too. As far as I can tell, I've got everything in the syntax right. Maybe it can't be inline.

Typography.Guru's picture

I guess you stripped the small caps while generating the webfonts. I just checked one of the TrueType fonts, and it just has a basic 8 bit character set in it.

The Realms of Gold's picture

Wow—that's a discovery. I didn't even think to check. I built all my own webkits using Font Squirrel's generator, rather than downloading prepackaged ones. Maybe one of the options I checked did something wacky? I'll go back and rebuild the kits.

The Realms of Gold's picture

OK, now I'm really stumped. I've tried a number of combinations, including downloading pre-made font-face kits and re-encoding my custom ones with every subset (except some language sets) checked. Nothing works, and the Mozilla hack always results in ordinary lowercase. I have no idea what could be causing this.

Typography.Guru's picture

Did you try the raw TrueType fonts? Does it work there? Are you sure the small caps are now in the font and accessible via OpenType?
I think with the Font Squirrel generator you would need to completely turn off subsetting, because the other options don't let you keep them.

As alternative, you can use the Font Squirrel generator to create a second font that has the small caps in place of the standard latin characters by choosing »Small Caps« in the OpenType options.

The Realms of Gold's picture

Sir Herrmann, you are terrific! Thanks for your insight. You were absolutely right—the font subsetting on FontSquirrel was the culprit. Even with custom subsetting which (I thought) included all advanced typographic features, apparently some things are removed, and small caps seemed to be one of them.

My plan now is to use the Mozilla hack AND CSS3 specifications simultaneously, so the site is ready when CSS3 becomes fully supported. I'll remove the hack code thereafter.

Thanks again!

Syndicate content Syndicate content