All text shows up italicised on mobile browsers

[sdcsdcd (Aa)]

Hi there!

I’ve encountered a weird issue with text formatting.
All the text, from body copy to headings, is showing up in italics. I’ve tested this on both mobile Safari and Firefox, and the problem persists. Very annoying, given that text is an important graphic element on my website.

Interestingly, this doesn’t happen when I emulate a mobile view via Inspect mode on my desktop browser, so it seems the issue isn’t tied to the breakpoint.

I’ve checked the inherited classes, and none of them have italics applied. I also added the CSS line font-style: normal !important to the Body tag, but that didn’t solve the problem.

For reference, I’m using a variable font that I’ve uploaded as a file.

Any help or insights would be greatly appreciated!

Best,
A.

Here is my site Read-Only:
https://preview.webflow.com/preview/free-jabriya?utm_medium=preview_link&utm_source=designer&utm_content=free-jabriya&preview=48af5e00dcd508987f7d5e9d169321d0&pageId=66bbdcce67f3b67d28ba90e8&workflow=preview

[bro-design (Dmitrii Tregubov)]

Hi @sdcsdcd Try to read this topic: Google font only shows italic on Safari

[sdcsdcd (Aa)]

Hi Dmitrii,

Thanks for the reply!

I’ve seen that post and it recommends resetting the Font Book on my device. However, the problem appears on mobile, which has no Font Book. So I’m not sure if this solution is relevant to my case.

Best,
Ann

[bro-design (Dmitrii Tregubov)]

Try to check which font you upload before (maybe you upload “italic” font)

It’s may be as: you upload italic font > in font project settings set for it regular > Smart Google browser understand that you want to use regular font and show it, but Safari saw that you try use an italic font as regular and show italic… Hope you understand what I mean)

[sdcsdcd (Aa)]

Thanks for the reply again!
The font I’ve uploaded was in a Variable format, i.e. it doesn’t have separate files for Italic and Normal variations, it’s all in one file.
I’ve attached a screenshot of my font settings below:

[sdcsdcd (Aa)]

A couple more screenshots. As you can see, it’s accessed from Webflow as a variable font:

[bro-design (Dmitrii Tregubov)]

Ok, it looks like the font/font file is with some issues. Just now I try to use it on own project and saw the same issue.

After that I tried to convert the font to modern file like WOFF and two different converters shows this:

So, if Acumin font available in static (not variable) version then try to use it. Otherwise, you will have to look for an alternative font💁‍♂️

[sdcsdcd (Aa)]

Yaaay you’re right!!!
I’ve changed the font to a static file and the issue is gone now!!
Thank you thank you thank you! <3

Here’s a screenshot where the bold paragraph has an updated font file, whereas the remaining text still has the old one:

Thanks mate, you saved me! :)