css - Chrome not rendering svg for fonts when hash included

Question

Chrome renders SVG fonts better than TTF, so I wanted to force it to use the SVG files. But when I only include the SVG in my declaration, Chrome doesn't find/apply the font. If I remove the hash symbol, it does apply it (likely the first thing found in the svg)! What am I doing wrong?

file structure

/
/fonts
/styles

styles.css

@font-face {
    font-family: "TeXGyreHerosCnBoldItalic";
    src: url( "../fonts/texgyreheroscn-bolditalic-webfont.svg#TeXGyreHerosCnBoldItalic" ) format("svg" );
    font-weight: normal;
    font-style: normal;

}

html

<div style="font-family: 'TeXGyreHerosCnBold';">Some text</div>

If I instead do this, it works:

src: url( "../fonts/texgyreheroscn-bolditalic-webfont.svg" ) format("svg" );

Answer 1

As suggested by @cinnamon, it seems to be the Chrome team deciding that you should not be able to traverse an SVG: https://code.google.com/p/chromium/issues/detail?id=128055#c6

@Cinnamon has more info here: https://stackoverflow.com/a/16042903/857025