Font rendering issues

I have uploaded otf, ttf, eot, woff, woff2, svg and the font looks fine on the system I have the font installed on, but not on other devices.

ANY ADVICE? :slight_smile:


Here is my site Read-Only: https://preview.webflow.com/preview/karakana?utm_medium=preview_link&utm_source=dashboard&utm_content=karakana&preview=863cb54200761d2b85de3ebf9b6c4b97&workflow=preview

Mark,
From what you are describing for mobile is a long page load that the browser sticks to a system font. fallback or optional does this.
Improve viewport load times or change the font display to swap or block.

Thanks for replying.

The fonts were originally all set to SWAP but have changed to BLOCK, not seeing any difference. The page is small in file size. Any other suggestions?


I did a test with a new blank site and just used an H1 header as the only element on the page, I uploaded the font again to this site and the same issue appears. I change the font some other custom font and the problem goes away. I can only imagine there is some issue with the font itself

Well strange,
I don’t think there is any need not to load just woff2 so I would try that.
If you haven’t got the woff2 option convert one of the others say ttf to woff2.

I have otf, eot, woff, woff2 loaded

Maybe this is something @cyberdave might be able to help with as he has been involved in these types of issues before - I believe.

Remove all but woff2 as one of the others could the issue. Although I would have thought the browser would load that 1st by default.
I am going from maybe one is not quite right when it gets to mobile.
If after woff2 you get the issue remove that and try woff then tff etc.
Something worth a try.

I got it working in the end with your suggestions. It isn’t 100% as I have to play around with the different Webfont formats to see which one is playing nicely, but your help has got me over that hurdle. Thank you

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.