CODEWITHSUNDEEP
google-chromerenderingfont-face
Richard Gouw
Richard Gouw

Reputation: 207

@font-face rendering issue in Chrome for PC

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.

enter image description here

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;

}

Upvotes: 7

Views: 8699

Answers (4)

Torben
Torben

Reputation: 6857

As hisnameisjimmy already pointed out, the solution is to use SVG fonts, which are always rendered with anti-aliasing, but this also has some drawbacks:

  • SVG fonts don't contain any hinting information, so the rendered letters aren't as crisp as they could be on a system that has font-smoothing enabled.
  • The weight and style of SVG fonts can't be changed, so using font-weight:bold; or font-style:italic; has no effect.

However, at least the first problem can be solved by using SVG fonts only if font-smoothing is actually disabled. There's a nice post at User Agent Man on how to detect font-smooting, which I used to create a little script (~600 bytes), which automatically updates your font-face CSS if font smoothing is disabled.

You can find my Font Smoothie script at GitHub'S GIST and all you have to do is to add the following line anywhere in your page:

<script src="fontsmoothie.min.js" type="text/javascript"></script>

However, you also need a well hinted font to get nice looking glyphs. Luckly there's a way to add some automatically generated hinting to a ttf-font using ttfautohint and you can then use Font Squirrel to generate the web-fonts. The whole process is a bit tricky so I wrote an article on how to create web-fonts on Pixels|Bytes, which explains how to add hinting to a font and how to use my Font Smoothie script. Hope this helps :)

PS: I'm aware that linking to my own blog won't be appreciated here, but I think my post describes a good solution to the problem, so I posted it anyway. Please leave a comment if you want me to remove the link and I'll do so.

Upvotes: 2

hisnameisjimmy
hisnameisjimmy

Reputation: 1548

https://stackoverflow.com/a/9041280/1112665

For @font-face delivered fonts, the fix is to put the svg file right below .eot but above .woff and .ttf

From this:

@font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’); 
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
     url(‘webfont.woff’) format(‘woff’),
     url(‘webfont.ttf’)  format(‘truetype’),
     url(‘webfont.svg#svgFontName’) format(‘svg’);
}

To this:

@font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’); 
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
     url(‘webfont.svg#svgFontName’) format(‘svg’),
     url(‘webfont.woff’) format(‘woff’),
     url(‘webfont.ttf’)  format(‘truetype’);
}

Examples of this fix can be seen here:

FontSpring Examples
Adtrak Examples

Upvotes: 8

Lubo Zviera
Lubo Zviera

Reputation: 51

I'm sorry guyes, but this doesn't work anymore in Chrome 16.

Similiar topic is here: @font-face anti-aliasing on windows and mac

And I wrote about it on Google Chrome Forum here, waiting for reactions now: http://www.google.com/support/forum/p/Chrome/thread?tid=43f549bc2a960a12&hl=en

Upvotes: 2

Matthew
Matthew

Reputation: 25793

You can specify text-shadow:

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

When using custom fonts, to make them render better in google chrome. It forces Chrome to use an alternative rendering path. Please note that this will increase CPU load on the end users machine.

Upvotes: 3

Related Questions