0

I'm having problems getting my web font in small caps using "font-variant: small-caps". Here's my findings and what I went through, ruling out possible problems :

  1. My initial thought was that the .woff file was not rendering small-caps for some reason. I've ruled this out because the font renders fine in Safari and Firefox, which as far as I know use the .woff format.
  2. My second thought was that it was a webkit issue, but as Safari displays it fine, I don't think it is.
  3. I'm not using twitter bootstrap, so no text-rendering: optimizelegibility, I've also tried resetting it to auto.
  4. I tried the font-feature-settings: 'smcp' including browser prefixes, which doesn't render small caps (only the first letter is capitalized, across all browsers)

Am I missing something out?

edit

After further research, I found a fix, which is to add font-variant:small-caps to the @font-face, like so :

@font-face {
    font-family:'MYFONT';
    src:url('../fonts/MYFONT.eot');
    src:url('../fonts/MYFONT.eot?#iefix') format('embedded-opentype'),
        url('../fonts/MYFONT.ttf') format('truetype'),
        url('../fonts/MYFONT.woff') format('woff'),
        url('../fonts/MYFONT.svg#myfont') format('svg');
    font-variant:small-caps
}

It turns out that only the stack was affected by this. Assigning a @font-face like so works as expected, in every font format supported by Chrome:

<style>
@font-face {
    font-family:'MYFONTttf';
    src:url('../fonts/MYFONT.ttf') format('truetype');
}
</style>

<div style="font-family:MYFONTttf; font-variant:small-caps">
    works as expected, in small-caps
</div>
veksen
  • 6,863
  • 5
  • 20
  • 33
  • 1
    Are you really gonna not tell us the font you're using? And the rest of your code and where you get the font, etc – Deryck Jan 02 '14 at 21:09
  • Test your assumption if Firefox and Safari really use the .woff file. Also, Safari uses Webkit, but Chrome uses Blink, which by now may already be significantly different from Webkit. – Mr Lister Jan 03 '14 at 08:20

1 Answers1

1

I think the key is, oddly enough, not to include the SVG-formatted font. Including just the WOFF and TTF seems to make it display alright.

I generated my various font files using Font Squirrel, so I ended up with .woff, .ttf, .svg, and .eot files. My font-related CSS was:

@font-face { font-family: "foo"; src: url(/fonts/foo.eot); src: url(/fonts/foo?#iefix) format('eot'), url(/fonts/foo.woff) format('woff'), url(/fonts/foo.ttf) format('truetype'), url(/fonts/foo.svg) format('svg'); font-weight: normal; font-style: normal; }

generated by Compass from:

+font-face("foo", font-files("/fonts/foo.woff", "/fonts/foo.ttf", "/fonts/foo.svg"), "/fonts/foo.eot", normal, normal)

which is in keeping with Compass's SASS font-face guidelines.

Removing the reference to the SVG seemed to fix it. I also tried switching the order of the TTF and the SVG (breaking Compass's 'recommended order' for font files) but that didn't help.

Taking a quick look around, it seems like Chrome has other miscellaneous problems with rendering SVG fonts. This isn't a really elegant solution but it might be necessary until Chrome sorts out its SVG issues.

vvviolet
  • 101
  • 3
  • Removing SVG indeed fixes it, but adding font-variant to the font-stack does as well. Are you exclusively talking about small-caps? – veksen Jan 11 '14 at 00:20
  • Yeah, I've only run into this with small-caps. Do you mean you solved it like [here](http://stackoverflow.com/questions/14527408/defining-small-caps-font-variant-with-font-face)? This seems like a cleaner solution than removing the SVG, but the typeface I was using didn't come with a small-caps font and I wasn't sure how to generate my own. How did you do it? – vvviolet Jan 14 '14 at 19:44