Rendering of Raleway (Google Web Fonts) in Google Chrome browser

Question

I am using Windows 7 and I have a problem with one of Google Fonts: Raleway. I checked and this font looks very good in Firefox (ver. 34) but in Google Chrome (ver. 39) it looks terrible on my computer. Sometimes I cannot read the text.

I downloaded Raleway Google Web Fonts thanks to this link:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway%3A200%2C300%2C400%2C500%2C600%2C700&#038;subset=latin">

---

Print screens (Windows 7):

Google Web Font: Raleway in Google Chrome 39

Google Web Font: Raleway in Firefox 34

---

Raleway, Google Web Font you can find on http://www.google.com/fonts/specimen/Raleway

Solution

This is a known issue with Raleway and some versions of Chrome, it's related to anti-aliasing of fonts. This is a fix for windows, using SVG in the css

/*FIX FONT FOR GOOGLE CHROME ON WINDOWS*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
    font-family: 'MyFont';
    src: url('fonts/myfont.svg#myfont') format('svg');
    font-weight: normal;
    font-style: normal;}
 }

This can make things look even worse on a Mac so you can code HTTP headers to change this only for Windows, instructions

This suggestion html { -webkit-text-stroke: 0.25px} from superuser looks promising.

This solution from stackoverflow explains how to get around issues involving locally installed google fonts and chrome rendering.

chrome bug report and news on Chrome 37 fixing it

Comments

[Cichy]

Google file contains CSS code, which download required font files (e.g. in Chrome it is ".woff2"). Part of this code is below. I do not understand what is the difference between using font files from Google server and from my server if principle of operation is the same. On the other hand I am using it in WP theme where user can change the font and I cannot include all Google fonts to WP theme, that is why I need to use standard solution using link to CSS (with @font-face) generated by fonts.googleapis.com.

[Cichy]

BTW in CSS file from fonts.googleapis.com when I start it in Chrome I have code like this: @font-face {(...) src: local('Raleway'), url(http://fonts.gstatic.com/raleway/(...)N8.woff2) format('woff2');

[Daniel F]

I don't see this at all. Is it fixed? If not, can you give me a link to an example page?

[Cichy]

I want to add that I have this problem on my computers (every where I see Raleway font), but I do not see this issue on other computers :|