@font-face svg not working properly in Chrome?

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.

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.

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