@font-face svg not working properly in Chrome?

Question

I have an issue with a specific font and the way it's rendered in Chrome.

Firefox shows the font properly due to using ttf.

Chrome doesn't use antialias and the font is too 'sharp' and ugly.

This is the css declaration I used

@font-face {
    font-family: 'HelveticaNeueLT Std Thin';
    src: url(../fonts/h2.eot);
    src: url(../fonts/h2.svg#test) format('svg'),
         url(../fonts/h2.woff) format('woff'),
         url(../fonts/h2.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}

I have come to the conclusion that the problem is with the svg declaration/font file. If I don't use the hash tag at all and leave it as only .svg, it renders antialiased but at a different line-height, with slightly off positioning. If I add .svg#anything, it doesn't antialias it at all and looks ugly.

Any suggestions are welcome to help me fix this rather annoying problem.

PS: Windows antialiasing is OK, i tested this. I also tried out the @media screen and (-webkit-min-device-pixel-ratio:0) declaration for the svg font only, to no success. I realize this may be a repost but having tried all the solutions from the related questions, I'm a bit desperate.

Answer 1

As Lily and font squirrel suggest, your SVG font should almost always come at the bottom of your list of @font-face sources. You don't want a browser to use an SVG font unless it can't use anything else.

The reason for this is that SVG fonts are very poorly supported, and support is decreasing. As of this post (2015), SVG fonts are no longer supported by Chrome (38) and are only supported by Safari 8, iOS Safari 8.1 and the Android browser 37. http://caniuse.com/#feat=svg-fonts

Edit: As of Feb 2016, Android Browser 47 no longer supports SVG fonts. Safari and iOS Safari still support them, and seem the be the only browsers that do.

Answer 2

try this @font-face implementation

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
  font-family: 'OpenSans';
  font-weight: 300%;
}

for more information check out this example https://github.com/ttibensky/BulletProof-font-face-implementation

Answer 3

To get webfonts to render with good antialias in Chrome on Windows, you need to use this format in the font declaration:

@font-face {
    font-family: 'Futura';
    src: url('futura.eot');
    src: url('futura.eot?#iefix') format('embedded-opentype'),
         url('futura.woff') format('woff'),
         url('futura.ttf') format('truetype'),
         url('futura.svg#futura') format('svg');

    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'Futura';
        src: url('futura.svg#futura') format('svg');
    }
}

Basically, you need to force Chrome to use the SVG font format. You can do this by moving the url for the .svg version to the top, however Chrome on Windows has had problems with messing up the layout when doing this (up to and including version 30). By overriding the font declaration using a media query, these issues are solved.

Also: Sometimes the baseline position doesn't match between OpenType fonts and SVG fonts but you can adjust this by simply editing the SVG font files. SVG fonts are xml based and if you look at the declaration

<font-face units-per-em="2048" ascent="1900" descent="-510" />

You can change the value for ascent and get it to match the other font format versions.

Answer 4

When referencing SVG files in @font-face the id (#) in the filepath is specifying the element inside the .svg file. To find the correct id you can open it in an editor and inspect the <font> tag.

For example:

@font-face {
    font-family: 'latobold';
    src: url('../fonts/lato/lato-bold-webfont.eot');
    src: url('../fonts/lato/lato-bold-webfont.svg#latobold') format('svg'),
         url('../fonts/lato/lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato/lato-bold-webfont.woff') format('woff'),
         url('../fonts/lato/lato-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

relates to:

<font id="latobold" horiz-adv-x="1187" >

Answer 5

Font Squirrel's webfont generator arranges their @font-face CSS like this:

@font-face {
    font-family: 'HelveticaNeueLT Std Thin';
    src: url('../fonts/h2.eot');
    src: url('../fonts/h2.eot?#iefix') format('embedded-opentype'),
         url('../fonts/h2.woff') format('woff'),
         url('../fonts/h2.ttf') format('truetype'),
         url('../fonts/h2.svg#h2') format('svg');
    font-weight: normal;
    font-style: normal;
}

More information about why the order is important here: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

If it's still giving you trouble, try using the aforementioned generator, choose the EXPERT option, and play around with the different settings (especially under Rendering and X-height).