user1207524 user1207524 - 2 months ago 14
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

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;
Comments