@font-face rendering issue in Chrome for PC

[Rocko]

I used font-squirrel to embed a font onto a site (with Apply Hinting selected), and it’s not rendering properly in Chrome v15.0 for PC. The font shows, but poorly. I’m sure that font-squirrel gave me the right code, so I assume there is a conflict in my CSS. Thanks in advance for your help.

Screenshot

Link to site

@font-face {

font-family: 'RockwellStd-Light';

src: url('rockwellstdlight-webfont.eot');

src: url('rockwellstdlight-webfont.eot?#iefix') format('embedded-opentype'),

url('rockwellstdlight-webfont.woff') format('woff'),

url('rockwellstdlight-webfont.ttf') format('truetype'),

url('rockwellstdlight-webfont.svg#RockwellStdLight') format('svg');

font-weight: lighter;

font-style: normal;



}



h1 {

font-family:'RockwellStd-Light', Helvetica, Ariel;

font-size:34px;

color:#407d3b;

font-weight:lighter;

margin-left:20px;



}



h2 {

font-family:'RockwellStd-Light', Helvetica, Ariel;

font-size:32px;

color:#ece1af;

font-weight:lighter;

line-height:42px;



}



h3 {

font-family:'RockwellStd-Light', Helvetica, Ariel;

font-size:20px;

color:#FFF;

font-weight:lighter;



}



p {

font-family:'RockwellStd-Light', Helvetica, Ariel;

font-size:14px;

line-height:17px;

color:#333;

text-align:justify;



}



.criteria_table {

font-family:'RockwellStd-Light', Helvetica, Ariel;

font-size:14px;

color:#FFF;



}

[TheDoc]

The rendering looks fine to me.

[Rocko]

I’ve added a link to a screenshot above

[TheDoc]

Yup, that’s how Chrome renders the font, unfortunately.

Give this a read: http://blog.typekit.com/2011/01/26/css-properties-that-affect-type-rendering/

You could try seeing if using -webkit-font-smoothing: antialiased; helps at all.

[Rocko]

No luck with -webkit I’m afraid. Also no luck with the text-shadow hack

[Rocko]

SOLVED: by adding text-shadow with these values

text-shadow: 0 1px 0 rgba(0,0,0,0.01);

[chrisburton]

@Rockomole This is odd because I’m still seeing the issue. I’m using Rockwell Std-Light on my site as well however, I’m not getting this issue. I’m wondering if it’s the way you’re embedding it. What I get on my site is the same shown here.

[davidlab.be]

try removing the font-weight property in the css selectors rules. You can leave it for the @font-face but will not need it unless you have more @font-faces with the same name. It is not needed in the css tags selectors since you are calling the only font family with that name and it is already a ligher font…so defining font-weight is not needed.

Not saying this will cure the issue but worth a shot.

[Rocko]

I came across a better solution recently, so just wanted to update it here :)

Add this as a new CSS rule after the @font-face rule

@media screen and (-webkit-min-device-pixel-ratio:0) {

@font-face {

font-family: 'FONT-NAME';

src: url('RELATIVE-FONT-URL') format('svg');

font-weight: normal;

font-style: normal;

}}

[Fontspring]

If any of you are still looking to improve your webfont rendering in Chrome, you may want to take a look at this post on our blog. It does have a solution similar to @rockomole’s suggestion: http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

[chrisburton]

I recently read that John Hoefler reported a bug in Chrome that has to do with rendering fonts. Not sure what exactly it consists of – still waiting to hear back.

Edit: It’s unrelated.

[trinzia]

Chrome was cutting my icons in half. IE wasn’t working because of a bad woff conversion. Another long day.

Paul Irish’s worked for me:

@font-face {

font-family: 'MobileIcons';

src: url('MobileIcons.eot');

src: url('MobileIcons.eot?#iefix') format('embedded-opentype'),

url('MobileIcons.svg#MobileIcons') format('svg'),

url('MobileIcons.woff') format('woff'),

url('MobileIcons.ttf')  format('truetype');

}

And I found this link, so watch out for sneak Arial attacks:

http://sixrevisions.com/css/font-face-web-fonts-issues/

[cherie]

None of the above work, sorry. I am using Drupal CMS and all my sites have fonts [both @font-face and standard body text] that are bleeding out around the edges in Chrome only, any suggestions?

[chrisburton]

@cherie Link?

[cherie]

Just tried: -webkit-text-stroke: 1px transparent but no luck. The link is, http://majellagt.com.

Thanks

[Author]

Posts