Skip to main content
A
Anonymous
July 29, 2011
Question

Small caps not working in web fonts

  • July 29, 2011
  • 2 replies
  • 2665 views

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 http://www.utcolmus.org/test.html , and the CSS file at http://www.utcolmus.org/main.css. Any help would be greatly appreciated!

Thanks,
Bram

    This topic has been closed for replies.

    2 replies

    A
    Anonymous
    July 30, 2011

    Looks like the culprit is FontSquirrel's subsetting option. Setting it to "no subsetting" fixed the problem.

    T
    Thomas Phinney
    Inspiring
    July 29, 2011

    Yeah, that doesn't work.

    CSS 3 supports directly accessing real small caps. Currently only Firefox supports this, and only via moz-prefixed properties (which makes sense as CSS 3 isn't final yet).

    http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/

    A
    Anonymous
    July 29, 2011

    I've read that, and 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: http://www.utcolmus.org/test.html

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices