@font-face rendering on webkit browsers

Question

Possible Duplicate:
@font-face anti-aliasing on windows and mac

This is my css:

    @font-face {
        font-family: 'Museo500Regular';
        src: url('../fonts/Museo500/MuseoSans_500.eot');
        src: local('?'), 
        url('../fonts/Museo500/MuseoSans_500.woff') format('woff'), 
        url('../fonts/Museo500/MuseoSans_500.ttf') format('truetype'), 
        url('../fonts/Museo500/MuseoSans_500.svg#webfontr3rD8cn7') format('svg');
        font-weight: normal;
        font-style: normal;
    }

.loginUser form h2{
font-family: Museo500Regular,sans-serif;
    font-size: 17px;
    font-weight: bold;
}

On IE,Firefox,Opera render well only on webkit browser is not rendering well, can anyone tell me why ? :|

What does "not rendering well" mean? I haven't experienced any issue with `@font-face` in Chrome, which is my primary browser. Can you set up an actual demo on [jsfiddle](http://jsfiddle.net)? — lanzz, Sep 14 '12 at 10:37
HI now you put the wrong font fmaily apply this do this .loginUser form h2{font-family: 'Museo500Regular', sans-serif; } — Rohit Azad Malik, Sep 14 '12 at 10:41
@lanzz see the difference between ie,firefox,opera and chrome... http://oi46.tinypic.com/11w98cz.jpg — RulerNature, Sep 14 '12 at 11:02
@Rohit Azad sory, my mistake when I have copied ... i have edited description. — RulerNature, Sep 14 '12 at 11:04
Is this on Windows? Haven't seen an aliased font on Mac, ever. Might be a Windows-specific font renderer problem. — lanzz, Sep 14 '12 at 11:56
Do you have a demo page where we can see this? It's quite difficult to find the exact problem otherwise. — DCoder, Sep 14 '12 at 12:08

score 2 · Answer 1 · answered Sep 14 '12 at 12:06

2

To get proper bold text, you need to use a bold (700) version of the font. If you use another weight and just ask browsers to bold it, they may algorithmically thicken the strokes, and this results in poor or awful rendering, depending on browser.

answered Sep 14 '12 at 12:06

Jukka K. Korpela

195,524
37
270
390

I have generated font with fontsquirrel.com/fontface/generator and if I open test file with chrome I see even there the differences between ff and webkit :| – RulerNature Sep 14 '12 at 12:14

score 1 · Answer 2 · answered Sep 14 '12 at 10:54

Rohit: I am sure that was just a typo, as it would break in all browsers

Have you tried the following method:

@font-face {
font-family: 'Museo500Regular';
src: url('../fonts/Museo500/MuseoSans_500.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/Museo500/MuseoSans_500.woff') format('woff'), 
     url('../fonts/Museo500/MuseoSans_500.ttf')  format('truetype'),
     url('../fonts/Museo500/MuseoSans_500.svg#webfontr3rD8cn7') format('svg');
}

It has always worked for me.. Otherwise it might be an error in your Woff file, since that is the one webkit uses

vivek · Answer 3 · 2012-09-14T11:19:00.870

0

Try this:

font-family: 'Museo500Regular';
    src: url('../fonts/Museo500/MuseoSans_500.eot');
    src: url('../fonts/ubuntu-r-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Museo500/MuseoSans_500.woff') format('woff'),
         url('../fonts/Museo500/MuseoSans_500.ttf') format('truetype'),
         url('../fonts/Museo500/MuseoSans_500.svg#webfontr3rD8cn7') format('svg');

Also try adding the following to the .htaccess

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf

edited Sep 14 '12 at 11:19

answered Sep 14 '12 at 11:13

vivek

1,944
1
17
26

where I must add that AddType ? on css file? – RulerNature Sep 14 '12 at 11:22
I don't thinl this is a solution ... – RulerNature Sep 14 '12 at 11:42
1

I was just suggesting the last solution. It might help, that's all. Try generating the font-face css using http://www.fontsquirrel.com/fontface/generator and try again. This might help too. – vivek Sep 14 '12 at 11:47
yes thank you, but already tested this :| – RulerNature Sep 14 '12 at 12:15

@font-face rendering on webkit browsers

3 Answers3