Safari issue with header menu font weight

[outpost33]

Hi,

I’m using MacOS 10.15.4 and Safari v13.1.

Font weights in the header menu are rendering lighter in Safari vs Chrome or other browsers. Here’s Chrome:

Here’s Safari:

Could you help me diagnose the issue? Many thanks!

[christian]

Hey Michael,

I checked your site using MacOS 10.15, Safari 13 and the latest Chrome version and I don’t see a difference on my end. Please try clearing your browser’s cache.

If you have browser extensions, please also temporarily deactivate all of them.

Regretfully, because I could not replicate the issue, there is nothing we could do for this case. Your font-weight setup is correct so there’s nothing to advise either.

Thanks.

[outpost33]

Hi @christian I cleared the cache several times already, including the server-side cache.

Please confirm that you are using 10.15.4 and Safari 13.1 (i.e. the latest versions). I can confirm that this does not happen on earlier versions of MacOS and Safari.

Thanks!

[outpost33]

Further to the above, there is definitely something going on here. It’s not only the header menu. Please see the examples below from lateste versions of Safari & Chrome:

Safari:

Chrome:

[christopher]

Hi Michael,

I also tried to find a difference, I use Safari 13.1 but I do not see a meaningful difference either:

I guess there is a little bit of change that is natural and how Safari and Chrome are different handling fonts.

I suggest that you consider using the -webkit-font-smoothing CSS rule and see if it makes a difference:

font-smooth

It is a non-standard method but affects Safari very much. Try to change the values of that and see the result.

You can use the CSS code below as a starting point (X > Theme Options > CSS):

.x-navbar .desktop .x-nav > li > a > span {
-webkit-font-smoothing: antialiased;
}

Thank you.

[outpost33]

Hi @christopher

Thanks for your reply – our messages crossed!

Please see the new screenshots above. As you can see, these actually look like different font weights - it’s very much a meaningful difference.

I tried your suggestion, but this has no effect. To me it really looks like Safari (or Chrome) is somehow rendering the font-weight completely differently. Could some of my custom CSS be causing this? I’m really still learning CSS and while I’m ok in some ways, I’m no expert when it comes to diagnosing.

Could you check to see if you can spot anything?

Many thanks!

[outpost33]

On further investigation, I have found the following. On the same system MacOS 10.15.4 and the latest versions of Chrome and Safari, I visited the Google Fonts page for Montserrat and compared the different weights as rendered by the two browsers. They are identical.

Here is Chrome:

Here is Safari:

Since there is no discrepancy between the way the fonts are rendering in these two instances, and yet on my site they are rendering very differently, this strongly suggests that this is either to do with the font handling of X or maybe some CSS that’s causing the issue.

Could you possibly have a deeper look at what’s going on?

[christopher]

Hi Michael,

Thank you for the detailed response. I tried to update my Chrome browser to make sure that I use the latest version.

I checked the CSS code and there seems not to be any specific cause. The problem is that I can not recreate what you showed me anyway. I tried many times but my Chrome shows both menu items and the top image title as same as Safari.

The difference is not as what you gave the screenshot. I need to ask my other colleagues to check that too as at the moment I don’t know how to proceed when I can not see the way you see the title.

I suggest that you rule out any external issue by disabling all plugins temporarily except Cornerstone. And also remove any CSS code that you added into X > Theme Options > CSS or anywhere else. And again do the testing.

Finally, I do suggest that you check the website with another device to make sure that it is not unique to your device.

Meanwhile, I will ask my other colleagues to check the website to see if they can recreate the issue.

Thank you.

[outpost33]

Hi @christopher

Thanks for your reply. I have already attempted disabling plugins, with no change in result. I have not attempted removal of CSS code, but in the meantime I have compared with two other Macbook systems.

One is an older Macbook Pro running 10.14.6, Safari v13.1 and latest Chrome, the other is a MacBook Air running 10.15.4 and the latest versions of Safari/Chrome. Neither of these systems shows the problem.

The test reveals that Chrome on my MacBook Pro 2019 renders Google fonts in a heavier style, but only on the X-based site I am developing. On other sites, the rendering of Google fonts is consistent between browsers. The same is true of Firefox.

This is such a weird issue. It suggests some kind of interface between X, browser type, and my specific development environment. I cannot imagine how that would work, but there it is.

If one of your staff has the latest MacBook Pro 16" model (MacBookPro16,1) then we would be able to test with more confidence of the result.

Thanks again for your help!

[rad]

Hi Michael,

Another support here and I tested it as well, the font looks the same for both Safari and Chrome. And so the same with google fonts.

The fonts are loaded based on google font standard and there is no difference on how it’s implemented. And I’m not sure why you’re not getting a different look when you view Montserrat directly from google font, but does on your site. Example, here is the source code from your site

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Montserrat:200,200i,300,300i,400,400i,500,500i,600,600i|Lato:300,300i,400,400i,700,700i&#038;subset=latin,latin-ext&#038;display=auto" type="text/css" media="all" data-x-google-fonts />

And this is from google font itself (adding all font weight)

I also see MEC plugin is pulling its own font, could you try disabling it and test it again? Then please go to your font display settings (where you set your fonts) and set it to swap similar to this

Thanks!

[outpost33]

Hi @rad

I tried disabling MEC and then setting Font Display value to swap, but this did not help.

Should I put the font settings back to auto or leave them on swap?

Thank you!

[christopher]

Hi Michael,

Please set it back to Swap. Unfortunately, we are out of options as we can not recreate the issue that you are experiencing. I can confirm the same thing now with four of my colleagues and the logical conclusion is that it is something isolated to your device.

Thank you for your understanding.

[outpost33]

Hi Christopher,

Thanks for looking into this, as always the support is much appreciated.

I agree that this must be somehow isolated to my device, or this group of devices. Weirdly it does not happen at all when using different weights of Typekit fonts, seems to be isolated to Google fonts at this point, although I need to test further to see if it is all Google fonts.

I can only say that this is a very strange issue, and also quite difficult, as it makes it impossible to have an accurate view of what I’m creating in either Chrome or Firefox.

That leaves me with the option of working in Safari, but in my experience Cornerstone does not play nicely in the Safari environment. Is this correct? Do you still recommend using Chrome over Safari for page building?

Thanks again!

[rad]

Hi Michael,

Unfortunately, it always goes down to personal preference so I can’t really recommend. I more prefer Chrome on Mac, though in your case, I think it should be Safari since the issue might be originating from Chrome.

Thanks!