Epic

Wow! Excellent and simple fix!

Brilliant – works a treat! Thanks.

The thing is , that with this fix it makes CHROME render fonts better, but other browsers rendering sucks big time and makes font look too bold. :/ So there is no fix at all.

Great Stuff. Works across all browsers apart from Chrome on Windows. Awful jagged fonts. Any Ideas? Much Appreciated.

DAMN, I usually don’t comment when I’m troubleshooting an issue, but this fixed an issue I was having on a site where the font was showing spaces as square boxes in Windows Chrome. THANKS!!!

This may seem obvious but it caught me and made me think this fix doesn’t work – when you rearrange your SVG file before your woff and ttf in the declaration, make sure to put #FontName after the name of the svg font. For example, in my case I’m using Fanwood so the declaration would be:

url(‘../font/fanwood-webfont.svg#FanwoodRegular’) format(‘svg’),

The “#FanwoodRegular” part is the SVG font name which is NOT necessarily the same name as the SVG font file itself. In my case it didn’t work until I opened up the SVG file in a text editor and found the part of the file near the top. I had to copy and paste the value of that id after the .svg# for it to work in Chrome. This fix definitely does work but there’s a lot that can trip you up.

Great trick, thank you very much! Love it!

Thanks a lot. Great fix! Worked for me on all webkit browser on all OS.

I’ve tested this solution with W7 (32bit) fresh install, with multiple browsers. Only Chrome works, everybody else (IE8, FF19, O12), the edges are still jagged.

Same question for me – what when embedding from google fonts?

Thank you! This also fixed another problem i was having with black rectangles appearing where spaces should be

Hello. Thank you for your article.
But I have a little problem. I have this font BauerBodoniStd, the svg trick doesn’t work on chrome, any ideea?

t

Brilliant – thanks Sam: worked for me too. I had actually been blaming my old monitor, so nice to have the problem solved

I do have a related question if you have time to comment.

I’m not sure how to apply the fix to other SVG files for bold and italic within the same font family. Do the font-weight and font-style statements need to be redeclared on the @font-face statement within the @media fix? Currently the following code with the fix applied at the end works for regular, but what is the correct approach for the bold and italic SVG’s?:

(I’m attempting to group specific font files for regular, bold and italic under a single font family (as shown following))

@font-face {
font-family: ‘liberation-sans’;
src: url(‘liberationsans-regular.eot’);
src: url(‘liberationsans-regular.eot?#iefix’) format(‘embedded-opentype’),
url(‘liberationsans-regular.woff’) format(‘woff’),
url(‘liberationsans-regular.ttf’) format(‘truetype’),
url(‘liberationsans-regular.svg#liberation_sansregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
font-variant:normal;
}

@font-face {
font-family: ‘liberation-sans’;
src: url(‘liberationsans-bold.eot’);
src: url(‘liberationsans-bold.eot?#iefix’) format(‘embedded-opentype’),
url(‘liberationsans-bold.woff’) format(‘woff’),
url(‘liberationsans-bold.ttf’) format(‘truetype’),
url(‘liberationsans-bold.svg#liberation_sansbold’) format(‘svg’);
font-weight: bold;
font-style: normal;
font-variant:normal;
}

@font-face {
font-family: ‘liberation-sans’;
src: url(‘liberationsans-italic.eot’);
src: url(‘liberationsans-italic.eot?#iefix’) format(‘embedded-opentype’),
url(‘liberationsans-italic.woff’) format(‘woff’),
url(‘liberationsans-italic.ttf’) format(‘truetype’),
url(‘liberationsans-italic.svg#liberation_sansitalic’) format(‘svg’);
font-weight: normal;
font-style: italic;
font-variant:normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: ‘liberation-sans’;
src: url(‘liberationsans-regular.svg#liberation_sansregular’) format(‘svg’);
}
}