Problem displaying font on chrome

Question

I'm having a problem with font rendering in Windows Chrome. I am using a Google Lato font with a size of 10 pixels with a font size of 300. Here is a comparison between rendering on Mac and Windows:

Chrome Windows:

Chrome Mac:

As you can see, the font in Windows is very difficult to read. I tried using:

-webkit-font-smoothing: antialiased;

but it didn’t work. Any ideas on how to fix this?

Here is an example: https://jsfiddle.net/Lcj9yxuo/

Answer 1

you can add shadow text to your style

label{
  font-family: Lato;
  font-weight:300;
  font-size:10px;
  -webkit-font-smoothing: antialiased;
  -webkit-text-shadow: rgba(0,0,0,.2) 0 0 1px;
  text-shadow: rgba(0,0,0,.2) 0 0 1px;
}

<link href="https://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600,700,800,300italic,400italic,700italic&amp;subset=latin,latin-ext" rel="stylesheet" type="text/css">

<label>
gwarancja niskich cen
</label>

Run codeHide result

see source for more details and explanations: How to apply font smoothing effects in CSS?