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

Solution 1

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.

Solution 2

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.

Solution 3

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" >

Solution 4

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

Solution 5

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

View more solutions

Comments

[Sandeep Pattanaik]

use this awesome tool to generate your font. fontsquirrel.com/tools/webfont-generator

[Simon East]

Absolutely brilliant. Was pulling my hair out trying to get SVG fonts to align properly until I found your post. Changed the ascent value from 1638 to 1900 and bam, all fixed. Thanks so much! Would vote you up 10 if I could. ;-)

[Supercranky]

@Joshua Which part of it?

[Joshua]

IE11 reports itself as webkit. SVG fonts don't work for IE however, which means you're screwed.

[Supercranky]

Well, I've only tested this in the IE11 Release Preview version (since IE11 hasn't been released for Windows 7 yet) and it loads the .eot font format (as it should). Are you saying IE11 for Windows 8 behaves differently?

[Per Quested Aronsson]

How does the media query kick in only for Chrome on Windows? It looks more generic: @media screen and (-webkit-min-device-pixel-ratio:0)

[Supercranky]

@PerQuestedAronsson You are correct, it targets WebKit browsers so both Safari and Chrome will use the SVG-format (or maybe I should say WebKit/Blink browsers now). This is not a problem since WebKit renders SVG fonts properly on all platforms.

[ESP32]

This answer is outdated - Chrome does not support SVG (since 2015)