Google web font renders differently on mobile Safari vs. desktop Chrome?

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>

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.

Controlling Font Performance with font-display, The new font-display descriptor for @font-face lets developers decide how their web fonts will render (or fallback), depending Safari has no timeout behavior ( or at least nothing beyond a baseline network timeout). font-display is currently behind the Experimental Web Platform Features flag in desktop Chrome 49, and is� font-display is currently behind the Experimental Web Platform Features flag in desktop Chrome 49, and is shipping in Opera and Opera for Android. Demo Check out the sample to give font-display a shot.

@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);
}

Why Does My Website Look Different in Different Browsers?, Web devs throw around "responsive website" to say that your website will look good on For instance, Safari and Chrome have different default fonts, which means the font on this code, the way the HTML and CSS render can potentially be compromised. Desktop Usage: Chrome 66% | Firefox 11% | IE 7% Google (1). I did discover the solution to fix the font rendering issue in Chrome, however. Check out the screenshot below first to see how text in Chrome looked after I made the change. Here is what I did to fix the text rendering issue in Google Chrome Canary: Load chrome://settings/ in the browser's address bar or select Menu > Settings.

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.

Are Safari and Chrome really supposed to render pages the same , Are Safari and Chrome really supposed to render pages the same way? to the text on FF and IE8, exactly the way I designed the site in Photoshop. Remember also that people have different fonts, font settings, and resolution sizes. Gnome (also known as a Desktop Environment) and Ubuntu's the most popular Linux� Hi Emily, I have the same link, i even re-entered it and tested again and still get font issues across browsers. Firefox is displaying it closer to the original, but safari is way off. See the attached screenshot, left to right its Chrome, Firefox, Safari.

SOLVED: Google fonts displayed on desktop but not on mobile , email: lk@alienbuild.uk | □ website: https://alienbuild.uk. The greatest I tried on Chrome for Android and Safari on iOS. On desktop (Mac and Windows) it works properly (with different browsers). I can't really figure out why� Example "I am trying to solve a mystery a page from a react web app can be loaded in safari on ios that page can be loaded in google-chrome on ios if you choose request desktop site that page is blank when attempting to load it in google-chrome on ios if you go with the default request mobile site the page works fine in desktop browsers i have taken steps to enforce a timeout on the server

Fixing Google Chrome compatibility bugs in websites - FAQ, Google Chrome aims to render sites exactly like Safari. site works in Safari there is a large chance it will work in Google Chrome and So font and element sizes can change slightly between browser versions and different browsers can interpret the encoding in different ways or not at all. View as Desktop My Sites. For some odd reason, font-rendering in Chrome on Windows is slightly poorer than font-rendering in Firefox or IE on Windows 7 by default. I tried fixing the issue with several different CSS properties to no avail. Low and behold, it was a system/browser issue for me. Here is how I fixed it: Enabled ClearType with the default settings.

More problems with Google Chrome's display of fonts, The latest problem with Google Chrome's display of this website is criteria, such as mobile-friendly design, rather than intellectual merit. Apple Safari browser but it has very different font metrics, runs much larger, and needs to be Affrique, and America (London, c.1656), as rendered by my desktop� The easiest way to identify fonts on web pages. What is the easiest way to find out the fonts used in a webpage? Firebug and Webkit Inspector are easy enough to use for developers.

Comments
  • Check out the values for font-smooth/-webkit-font-smoothing here
  • @emsoff thanks for the suggestion, but the page says this property is non-standard and should be used. any other ideas?
  • unfortunately no. This is the only way to do it, standard or not. The other option is to not "fix" it, and let each browser render fonts the way they've decided.
  • If you need an identical look, use a webfont, and importantly: don't trust google webfonts. Their CSS includes local() loading first, which you should never allow. So get the CSS file their css link gives you, take that out, then host that CSS yourself, instead, so you know you're never letting the OS pick the font for you.
  • @Mike'Pomax'Kamermans ah didn't realize it even covered font formats! very cool. thanks for sharing.
  • Finally found the right cause and solution! See the answer below, but tldr, you need to either use a supported weight or normal for the font weight.
  • hi thanks for your answer. isn' it possible to link directly to the google font files instead of self-hosting them?
  • Hi @Crashalot you can download Signika via Google Fonts
  • sorry for the confusion. rephrased: what's the difference between self-hosting the font and linking to the one from google fonts?
  • It will cause the font to have the exact properties of such font across all platforms.
  • it turns out safari alters the font if you attempt to use a font-weight not supported by a font. using a supported font weight or using normal as the font-weight removed this issue.