5

I am having issue with font rendering on Windows Chrome. I am using Google Lato font, size 10px with font weight 300. Here is the comparison between rendering on Mac and Windows:

Chrome Windows:

enter image description here

Chrome Mac:

enter image description here

As you can see, the font on Windows is very hard to read. I have tried to use:

-webkit-font-smoothing: antialiased;

but it didn't worked. Any ideas on how to fix this?

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

uksz
  • 18,239
  • 30
  • 94
  • 161

1 Answers1

0

you can add some text-shadow to your styling

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>

for more details and explanation see the source : How to apply font anti-alias effects in CSS?

Community
  • 1
  • 1
Belhassen Chelbi
  • 1
  • 1
  • This didn't changed the rendering - it looks exaclty the same as it did without this style. – uksz Mar 25 '17 at 10:57