CSS Font Rendering Issue

Question

I am developing a website. I'm using a google font to style my page. But it's not displaying correctly. I've read up a bit on faux fonts, but I believe that only applies when the font that is needed is not supplied. I've imported my google font, code is

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    src: local('Titillium WebSemiBold'), local('TitilliumWeb-SemiBold'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wprx7IBmrqA5IG9z8WNe77b9o.woff) format('woff');
}

My CSS for the font is

font-size:30px;
font-family: 'Titillium Web';
font-style: normal;
font-weight: 600;

But I believe it's displaying a faux font. Here's the difference between an image of what it should look like on the left, and what it's displaying on the right.

My problem http://resource.theboulderdesign.com/400/homebox/gettingcompare.png

I hope someone can solve my problem.

Morgan Kenyon

Answer 1

It's a Chrome/Windows problem. It'll affect the font thickness and letter spacing, but you can add a white text-stroke to smooth it out:

-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
-webkit-text-fill-color: white;

Demo: http://jsfiddle.net/zzmbu/

Here's a screenshot of it: