Hi,
None of our font weights are applying using the browser Safari. Do you know why this is/how we can fix it?
Hey @clientattraction,
Can you give us a comparison screenshots of what the font weight looks like in desktop and in Safari? Please also give us the Operating System and browser versions.
We need those details to give us more context of what the issue is and the possible causes.
Thanks.
This is how it appears in the most up-to-date versions of Firefox and Chrome:
This is how it appears in Safari, on desktop and on mobile (red text is an image so that is not affected):
The one on the Safari is the correct one since the font weight is set to 400, and it’s the regular font weight. There was known issue on Mac about font smoothing which could be the cause of this, for that, please add this CSS to Theme Options > CSS
body * {
-webkit-font-smoothing: antialiased;
}
As for firefox, this could be the case https://support.mozilla.org/en-US/questions/1233884. Please let me know if it fixes them 
Thanks!
Thanks! I tried that but it didn’t work. But maybe because the body font isn’t the one with the issue? The issue is the header fonts.
Hello @clientattraction,
I have checked your site again and one thing I noticed is that you have inserted invalid html codes.
You added this:
<p><img class="aligncenter wp-image-22539 size-full" style=" height: auto; max-width: 100%; width: 400px; padding-top: 20px !important;" src="http://boldheart.com/wp-content/uploads/2019/03/Join-Us-For-Coffee.png" /></p>
<span style="display:inline;" class="inf_infusionsoft_click_trigger_element" data-optin_id="optin_1"></p>
<p style="font-family: 'Montserrat' !important; letter-spacing: .13em !important; text-transform: uppercase; color: #f5b0a4;">Click here for Saturday Inspiration emails</p>
<p></span>
The correct one should be this code:
<p><img class="aligncenter wp-image-22539 size-full" style=" height: auto; max-width: 100%; width: 400px; padding-top: 20px !important;" src="http://boldheart.com/wp-content/uploads/2019/03/Join-Us-For-Coffee.png" /></p>
<p style="font-family: 'Montserrat' !important; letter-spacing: .13em !important; text-transform: uppercase; color: #f5b0a4;"><span style="display:inline;" class="inf_infusionsoft_click_trigger_element" data-optin_id="optin_1">Click here for Saturday Inspiration emails</span></p>
And also this one is invalid:
<p> Call Us: (203) 717-4404 | International: +1 203.716.6304 | Email: <a href="mailto:info@boldheart.com">info@boldheart.com</a></p>
Copyright ©2019 Boldheart, All Rights Reserved. <a href="/privacy-policy"><u>Privacy Policy</u></a> | <a href="http://members.boldheart.com"><u>Member Center</u></a><br><br></p>
The correct one should be this:
<p> Call Us: (203) 717-4404 | International: +1 203.716.6304 | Email: <a href="mailto:info@boldheart.com">info@boldheart.com</a></p>
<p>Copyright ©2019 Boldheart, All Rights Reserved. <a href="/privacy-policy"><u>Privacy Policy</u></a> | <a href="http://members.boldheart.com"><u>Member Center</u></a><br><br></p>
There might be some other broken html code that you have added that I did not spotted. Please revisit your page contents and make sure that all your custom html codes is valid and correct. Unclosed or invalid html code will affect the rest of the page element and would even create conflicts later on.
Hope this helps.
Thanks! I did both and added the antialiased code back and it’s still not working in Safari.
It seems to be working on my end, please check this
May I know what browser versions you’re testing it with?
Thanks!
The version you’re posting above is not correct. In every other browser, the font weight is heavier. (See my images above.) Each browser I’m using is currently running the most up to date version.
Another support here, I checked in Chrome and Safari and it seems to the same on my end too.
Can you try clearing your browser cache and check again.
Thanks
I’ve cleared cache and tried on several computers - it’s appearing bold (as css specifies) in Firefox and Chrome all on devices for me.
In that, please provide what browser version you’re testing it with, it’s requested multiple times so we could test it the same as how you tested it
https://www.wikihow.com/Find-Which-Version-of-Firefox-You-Are-Using,
https://help.zenplanner.com/hc/en-us/articles/204253654-How-to-Find-Your-Internet-Browser-Version-Number-Google-Chrome,
And please provide what MacOS version,
Thanks!
Google Chrome is up to date
Version 74.0.3729.131 (Official Build) (64-bit)
Mojave 10.14
Hello @clientattraction,
Thanks for updating the thread.
I am using macOS Mojave 10.14.4 Safari 12.1 and Chrome 74.0.3729.131. On my end I am also unable to replicate the issue of font weight.
Please try loading the website on a different computer or mobile and see how it goes.
Thanks.
The only browser where I see the site the way you are seeing it is Safari (desktop and mobile). If we are using the same browser and same version, why is this issue occurring?
Hey @clientattraction,
Since this is not happening on Prasant’s end and you both have the same OS and browser version, this could only mean that this is device specific.
I’ve asked Prasant and he was using Macbook Air and it does not have Retina resolution. Would you mind checking your device if you also have the same setup?
This could still be related to font smoothing but because Retina display could also be a factor, the antialiased value for -webkit-font-smoothing property might not be the right solution specific for your device. With that said, please try changing the code provided previously to this:
body * { -webkit-font-smoothing: subpixel-antialiased !important; }
If that does not help, try changing subpixel-antialiased to auto and all the font-smooth values you can find in the property documentation https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth
Please note that we could not guarantee that this would be fixed for your device because it is not feasible to take into account all the different devices that could run the same OS and browser.
We also hope that you’ll understand that since this does not happen on our end, we don’t have the means to test this further. Knowing that this does not happen on our end though means that maybe a few of your website users are having this same issue. You need to take a look at your site’s analytics and user feedback though to see if this really affects your users. You can let us know about that but note that the best that we could do is post this in our issue tracker and we’ll research more on this. Again, just note that we could not guarantee a fix for a specific device. Our product’s compatibility is mostly based on popular operating systems and browsers and not device specific.
Thank you for testing.
I do have retina display - but my phone does also. I’ve also asked several people on our team to test, and they all are experiencing the same issue as I am (all the Montserrat font text is too thin when viewing in Safari, and Safari only). I tried the codes above and they didn’t work - but I’m also not sure what the code would be solving. No one on our team seems to be seeing what you are seeing on your end.
I’m another staff and I couldn’t replicate this issue on my end as well:
I’m using:
- MacOS Mojave 10.14.4
- Chrome Version 74.0.3729.131 (Official Build) (64-bit)
- Safari Version 12.1 (14607.1.40.1.4)
Regards!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.