@font-face rendering in Windows 7

S

2

0

I use @font-face to enable custom fonts. It works in Firefox, IE, Safari and in Chrome on Mac. On Windows 7 with Chrome the text at 10px look green not black or grey! ... after more testing: same problem with Firefox (Windows) and Safari (Windows)

Maybe it has something to do with the Windows ClearType rendering. But why it works in Internet Explorer??

Direct link to the page: http://www.light-work.de/chrome.html

It´s really strange! The problem occurs only with 10px fontsize (the size that I need). Under light-work.de/webfontkit/ you can see the specimen overview.

A bigger screenshot: http://light-work.de/styles/02.png

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>google chrome</title>
<style>
/* Generated by Font Squirrel */
@font-face {
    font-family: 'M10Regular';
    src: url('http://light-work.de/styles/m10/m10-webfont.eot');
    src: url('http://light-work.de/styles/m10/m10-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://light-work.de/styles/m10/m10-webfont.woff') format('woff'),
         url('http://light-work.de/styles/m10/m10-webfont.ttf') format('truetype'),
         url('http://light-work.de/styles/m10/m10-webfont.svg#M10Regular') format('svg');
    font-weight: normal;
    font-style: normal;

}


body {
    font-family: 'M10Regular';
    line-height: 20px;
    font-size: 10px;
    color:#666666;
}


</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</body>
</html>

Surgical answered 6/5, 2011 at 11:41 Comment(2)

If you want a cross browser compatibility, you can always use Google fonts google.com/webfonts – Infestation 6/5, 2011 at 11:46

First thing you should try in situations like this, is validating your html: validator.w3.org – Relator 6/5, 2011 at 12:23

E

0

Your example web page renders in grey (#666666, actually) for me with Chrome v11.0.696.60 on 64-bit Windows 7.

Right-click on the text that doesn't seem right to you to bring up the context menu. From that, click Inspect element. That will open the developer tools. They'll help you sort out your problem. This is what I see

Screenshot of test page in Chrome, with developer tools open

As you can see, Chrome is rendering your page according to the styles you've specified.

Exultant answered 6/5, 2011 at 17:48 Comment(2)

Thank you, a great tool! After some more testing the problem occurs in Firefox 4.01 (WIN), Safari 5.05 (WIN) and Chrome 11.0.696.60 (WIN). I will test the page on some more Computers but have you any idea what the problem could be? Thanks. – Surgical 6/5, 2011 at 18:8

I´ve tested the site on other machines and it is working. Thanks for your your help! – Surgical 8/5, 2011 at 13:29

L

0

Well, your text is not in the body tag. So your style should not be applied (which is obviously isn't in Chrome). The question should be: Why are all the other browsers minding your font setting? :-)

Larock answered 6/5, 2011 at 11:43 Comment(2)

Oh, I´m sorry, what a mistake! Unfortunately I still get the wrong color in Google Chrome. – Surgical 6/5, 2011 at 15:0

Because browsers try to be accomodating to invalid markup. Each browser interprets such invalid markup differently in its attempt to interpolate it into a valid structure. – Exultant 6/5, 2011 at 17:39

E

0