Search code examples
google-chromerenderingfont-face

@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;

}
Solution

  • 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.