Small-caps not rendering in chrome using web font

Question

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>

Answer 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.