Google web font renders differently on mobile Safari vs. desktop Chrome?
Question
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;
}
3 answers
solution1
4 ACCPTED 2020-07-09 07:03:08
It turns out Safari alters the font if you use a font-weight not supported by a font (eg, 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.
solution2
3 2020-05-07 01:55:52
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.
solution3
2 2020-05-05 08:10:27
@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);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.