Search code examples
cssfirefoxfont-facewebfonts

Firefox is breaking my small-caps

I'm having an issue where font-variant: small-caps isn't rendering correctly in Firefox. Any other browser is fine. I'm stuck with this particular font, and even this particular definition of the face due to its license.

How it looks in Firefox:

good dog

How it's supposed to look (from Chrome):

bad dog

Is this a problem with the encoding of the font? Is there a work-around?

The issue is presented in full in this jsFiddle. (Base64-encoded font was too big to put all in the question.)

Solution

  • The font is broken for those characters. Other browsers fallback to the next font in a different way from Firefox. You can see this by providing an obviously different font as the second font in the font-family. For example, in this JsFiddle, Wingdings is used as the first fallback font. i.e.

    body { font-family: "THAT-FONT", Wingdings, "Open Sans", "open-sans", Sans-Serif; }

    https://jsfiddle.net/rnwvpfy1/2/

    See how Chrome displays that, showing that it's not using the "THAT-FONT" font for the broken characters.