user1207524 user1207524 - 1 year ago 76
HTML Question

Open Sans rendering incorrectly on mobile device

I am using Open Sans Light sourced from Google Fonts on one website. Everything is looking good, except one special character 'č' renders thicker than the rest of the text on mobile devices. On desktop it looks alright. Any idea what could be causing the issue and how to resolve it, please?

Link to the website

Answer Source

The answer is to include the latin subset support

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,800&amp;subset=latin-ext,latin" rel="stylesheet">

Also, if I was you I would add the correct font-weight you have:

p, .tg {
    padding: 30px;
    color: #00afec;
    font-weight: 100;
    font-size: 28px;
}

Change to:

p, .tg {
    padding: 30px;
    color: #00afec;
    font-weight: 300;
    font-size: 28px;
}

As an addition I would add some font smoothing:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;