Fonts Displaying Differently on Mac & Windows

Dazzling
1

We’ve discovered that fonts on our website (both heading & body text), are displaying on different styles for Mac & Windows. On windows it’s showing as a serif font, on Mac it displays as a sans serif style. We’re wanting the site to display text in the sans serif style as it does on Mac’s across windows machines as well. Does anyone have any advise on changes we could make to allow this? If this isn’t a common problem and you need our URL, let me know.

2

Hi there

yes, I need a url of the website to check this problem, please provide a direct link to the page and would be awesome if you provide a screenshot too

3

Website is https://www.amcustomclothing.co.uk/ every page has this problem, although I’ve attached 2 screenshots of some text on the home page. The screenshot that has an orange tint has been taken from a windows PC, the normal screenshot has been taken from a Mac, you can see the fonts are totally different, when it comes to standard headings/body text.

Any idea where the problem is?

Thanks so much in advance!

Alex

4

Hi Alex

everything looks ok on my side, Open sans font is used and when I check it on my PC in every browser it’s appearing normally, can you check which font is used in your Mac devices? is it Helvetica?
The problem is that I don’t have Mac devices to check it

5

I’ve just checked, it appears to be displaying as Helvetica Neue. I’ve attached a screen shot of where I got that information from. We’d ideally like it displaying Helvetica Neue (as per Mac display) on all devises.

6

HI

it appears to be Helvetica Neue for me as well, everywhere now on my side too: https://www.loom.com/share/eaa15ea6a84446978531531f3b920aa2

Looks like its fixed?

7

Hi Noda,

On the banners/buttons it is a sans serif font like helvetica, however, if you check the body text (outside of banners/buttons) it’s still a serif font. I’ve taken a print screen from your video, where you’ll see the body text isn’t helvetica, if you inspect element your end it may say the font?

Thanks in advance for any help!!

Alex

8

HI there

Thank you for extra information, please add this code now:

.btnsx-text-primary {
font-family: Helvetica Neue;
}

9

Hi Noda,

This doesn’t seem to have worked. I’ve attached a print screen as you can see the extra code has been input, alongside existing code now being set to Helvetica, as opposed to ‘inherit;’ (this change was made as it didn’t work when it was set to ‘inherit’ either).

Let me know what you think, thank you!!

10

Hi Alex

Ok, I see code is added but I think important is necessary in this case, let’s change your code to this:

.btnsx-text-primary {
font-family: Helvetica Neue !important;
}

11

Hi, I’ve made the code update (see attached). However we still seem to be facing this issue when using windows machines. Any other suggestions for this?

Thanks again!

12

Hi Alex

Please clear the cache, I have a windows PC and button is appearing normally for me: Screenshot by Lightshot

13

Sorry if I’m misunderstanding you.
I’ve attached a visual showing a comparison between your print screen & how it’s displaying on mac with cache cleared. As you can see from the body text and buttons, the 2 print screens don’t match still.

It’s confusing as it in inspect it is showing you that it’s in Helvetica Neue, however, if you google what Helvetica Neue looks like, you’ll see that the type isn’t actually displaying on windows in this typeface, despite the inspected element showing otherwise.

Does that make sense?

Thanks,

Alex

14

Alex, im sorry about this, I think its better if you utilize one of the plugins, please try this one: Use Any Font | Custom Font Uploader – WordPress plugin | WordPress.org

15

No problem at all, thanks for all of your effort on this one. I’ll give the plugin a try!
Thanks again for the support! Feel free to close this thread.

16

Thank you for understanding, and feel free to contact us in case you need further assistance. We’d be happy to help.