7

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

GWF Raleway in Google Chrome (Windows 7)

Google Web Font: Raleway in Firefox 34

enter image description here

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

Improve this question
5
  • There are some issues with chrome and google fonts also. To solve this issue you can do : download font all forms [woff, ttf, svg etc] , create font face kit and call it using @font-face in css file. Also upload font face kit to your server.
    – Helping Hands
    Commented Jan 5, 2015 at 12:50
  • 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
    Commented Jan 11, 2015 at 11:32
  • 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');
    – Cichy
    Commented Jan 11, 2015 at 11:33
  • I don't see this at all. Is it fixed? If not, can you give me a link to an example page?
    – Daniel F
    Commented Jun 9, 2015 at 6:24
  • 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 :|
    – Cichy
    Commented Jun 10, 2015 at 7:26

1 Answer 1

Reset to default
4

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.