CODEWITHSUNDEEP
cssfont-faceembedded-fonts
Bhasu
Bhasu

Reputation: 51

@font-face problem with chrome

I used the Museosans500 font with the following syntax 

@font-face {
    font-family: 'MuseoSans500';
    src: url('MuseoSans_500-webfont.eot');
    src: url('MuseoSans_500-webfont.eot?iefix') format('eot'),
        url('MuseoSans_500-webfont.woff') format('woff'),
        url('MuseoSans_500-webfont.ttf') format('truetype'),
        url('MuseoSans_500-webfont.svg#webfontkQkWxTED') format('svg');
    font-weight: normal;
    font-style: normal;
}

It is working fine in Firefox, but it is not displaying the font correctly in Chrome.

Upvotes: 1

Views: 4239

Answers (4)

Richard Lyall
Richard Lyall

Reputation: 11

Yes this is correct - make sure you define SVG first, otherwise Chrome will use that to display the font, and this will look jagged. By putting it first you ensure that Chrome will use one of the later definitions to display the font.

Upvotes: 1

Cthulhu
Cthulhu

Reputation: 5235

Put SVG format before all others on your CSS.

Upvotes: 0

Sam Tsai
Sam Tsai

Reputation: 494

I'm not sure what issues you are experiencing but this website http://seanmcb.com/typekit/webkit-antialiasing-test.html gives a great run-down of test cases of a webkit bug, which might be what you're experiencing.

I'm seeing the anti-aliasing issue in my own site and I'm going to try out the pseudo-element trick. The bug as described by the site: "In Webkit browsers on Mac, @font-face fonts render with whatever antialiasing setting the previously rendered text was using."

Next, would be good to see if webkit has a bug open for this issue.

Upvotes: 1

Mushon
Mushon

Reputation: 61

This might be due to the version of Chrome you're running on Windows. I know Chrome 10's @font-face rendering was not too smooth. Please take a screenshot and share with us and then possibly update your browser, take another screenshot and compare them.

Good luck!

Upvotes: 0

Related Questions