Menu
A Google web font (Signika) renders differently on desktop versus mobile. As illustrated by these screenshots, the kerning (space between letters) is larger on mobile than desktop, and the stroke is thinner. The letters on desktop also seem crisper, though this is more subjective.
Desktop (Chrome):
Mobile (Safari, iOS 12):
Codepen:
https://codepen.io/Crashalot/pen/3ff682e5aa123e1ac293ab19b06f1285
#pageBox h1 {
margin: 30px auto;
text-align: center;
}
h1 {
font-size: 2em;
font-weight: bold;
line-height: 1.2em;
}
h1,
h2,
h3,
h4 {
font-family: "Signika", Verdana, Tahoma, Arial, Sans-Serif;
color: #7C7A7D;
}<head>
<link href="https://fonts.googleapis.com/css?family=Lato|Roboto|Signika|Source+Sans+Pro:400,700" rel="stylesheet">
</head>
<body>
<div id="pageBox">
<div class="header">
<h1> Icon Editor </h1>
</div>
</div>
</body>Signika portion of self-hosted font stylesheet:
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/signika/v10/vEFR2_JTCgwQ5ejvG18mBlprZ0gk0w.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/signika/v10/vEFR2_JTCgwQ5ejvG1EmBlprZ0g.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
224
If you notice that your text fonts look different on different browsers, it is because different browsers and devices use different rendering engines, and therefore may result in minor differences. Sometimes these minor differences can have a domino effect.
To stop this happening make sure in your CSS you have font-weight: normal and font-style: normal in your @fontface code block. You then need to apply the necessary styles to the HTML elements. And then add the specific styles for each element that uses that font.
Go to Control Panel > Appearance and Personalization > Display > Adjust ClearType text (on the left). Check the box entitled “Turn on ClearType.” After going through a short wizard, this will fix some of the text rendering issues in Chrome.
No. As Gmail doesn't support web fonts, you might be wondering whether it's they're still worth using.
It turns out Safari alters the font if you use a font-weight not supported by a font (e.g., the font file only offers weights of 400 and 600, but you choose 700). Specifying a supported weight or using normal removed this issue.
Extremely frustrating, but hopefully our misery helps someone.
55
I wasn't sure from your question whether you were more interested in the why or the how to fix aspects. Assuming how to fix:
Since you used the word kerning, you are probably already aware of this, but I was able to match up the appearances by adjusting the following:
body {
letter-spacing: -0.1px;
transform: scale(1.05, 0.95);
}
If that doesn't look quite right to you, those values are of course adjustable.
font-kerning: none; is a little more severe, but does help normalize between engines a little bit.
For reference,
So, you could if you wish, detect mobile and/or safari via numerous other checks (which have already been answered in other questions, so I will omit here), and then apply the CSS above.
If, in fact you were asking about why there is a difference, that comes down to the rendering engine - but I will assume for now you are asking about normalizing appearances.
2
@crashalot the reason why the font looks different on Safari as to Chrome is that the webkits are ever so slightly different. The only way to avoid this problem really is to download the font files and then link them:
body {
...
font-family: Signika;
...
}
@font-face {
font-family: Signika;
src: url(signika.ttf);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
