google font wordpress issue

[salah189]

hey guys I have an issue with google font, It works fine with google chrome browser but when I open my website with other browser I see different ugly font, so How can I have an unified google font for all browser ?

I’am using wordpress : 5.8.1
Theme : flatsome
website : https://kdpinterior.com/

[Gandalf]

Hi there. I have temporarily unlisted your topic.

Could you please explain… What “other” browser are you getting this problem with? And where, exactly, are you getting the ugly font?

[TechnoBear]

I see you were advised to ask the theme developer for support.

https://wordpress.org/support/topic/google-font-issue-4/#post-14967516

Did you try that, and if so, what was the response?

[PaulOB]

@salah189

but when I open my website with other browser I

Looks the same in Chrome and Firefox to me. What browser do you see a problem with?

[salah189]

on firefox for example

[salah189]

could you share the screenshot of firefox

[Gandalf]

You’ve not answered @TechnoBear’s question in post #4

[PaulOB]

@salah189

on firefox for example

If you are talking about the odd letter like the ‘b’ in that menu not displaying correctly then I believe that’s because you are using the google font ‘sora’ but you have not downloaded the font at font-weight 600 and instead are using css to make the font semi-bold (in your body tag you have font-weight:600). This means the browser attempts to bold the font but doesn’t really know how to do this.

You need to download the custom fonts at the weights and styles you are going to use.

e.g.In the google font url you would have something like this.

Sora:wght@300;600

I suggest you go back to the google font page and generate a new url for that font with all the weights and styles you need and then read the documentation on how you apply those styles in your page

You should do that for all custom fonts as you have a set a global rule ion the body of font-weight:600 which means that if you have downloaded any custom fonts then you need also to have downloaded all their font-weight:600 versions also.

Here’s the proof of the above. Test in Firefox

1. Not working
   https://codepen.io/paulobrien/pen/rNzeamv

2. Is working
   https://codepen.io/paulobrien/pen/MWvyYmr