Font-weights and letter spacing way off on iOS Safari and Chrome

[sc8tty]

The h1 on this page is displaying wildly different weight and letter spacing on iOS. Looks correct in Cornerstone and on desktop browsers (and Chrome Inspector iOS simulator).

https://www.toastcatering.com/deliverynew/

The h3 is showing a completely different weight. I have cleared caches and tried this:

body * { -webkit-font-smoothing: subpixel-antialiased !important; }

Pls help. Thanks.

[christian]

Hey @sc8tty,

Try antialiased only instead of subpixel-antialiased. The former is lighter but its “lightness” appears to be much closer with the Chrome antialiased.

Safari antialiased

Safari subpixel-antialiased

Chrome antialiased

We really can’t get pixel-perfect cross-browser display because of the difference in rendering methods of the browser.

Thank you for understanding.

[sc8tty]

I’m not expecting perfection! The bigger issue here is the letter-spacing — it’s way off on iOS. This is what I’m seeing:

Vs Cornerstone:

[jade]

Hey @sc8tty,

Please try updating the code you have added to:

body * { 
    -webkit-font-smoothing: subpixel-antialiased !important; 
    text-rendering:optimizeLegibility !important;
}

Please let us know how it goes.

[christian]

Hey @sc8tty,

The cause of the issue could be missing font-weight. I see you’re using 600 weight but only 400 is loaded in the front-end. You’re currently using a faux font-weight of Chrome which and the Safari version of that is different.

I’ve tested tweaking the font-weight in the dev tool to 400 and it’s close to what’s displayed in Windows Chrome. The floating text in the screenshot below is the iOS Safari version taken from a real phone.

Please set your font weight to 400. If you need the 600 weight, you will need to use the Font Manager for the Text element so that the Font Weight will be loaded.

Hope that helps.

[sc8tty]

The font weight is already loaded:

Still seeing the same issue after updating the CSS code.

[christopher]

Hi @sc8tty,

I checked the website with Chrome, Safari Desktop, and iPhone XR and all are rendering the same. Actually, your screenshot of the Chrome browser is off for me.

Chrome:

• 

Safari:

• 

iPhone XR:

• 

The reason that Delivery goes to the next line is that there is not enough space available in Portrait mobile mode. In Landscape mode, it shows in one line.

I played with the value of the Letter Spacing for the headline and found out that if you change the value of Letter Spacing to -0.3rem it will keep the headline in one line for iPhone XR portrait mode.

Please consider that the font that you choose is a wide one and if you want to have your headline be in one line, I suggest that you consider more condensed font.

Thank you.