I’ve recently built my portfolio site where I’ve sourced my fonts from Adobe. I have followed the Webflow tutorial for integrating the fonts and am able to use them in the Designer, where they’re displayed correctly. They also display just fine in Chrome. But…when it gets to Safari on mobile and desktop…it defaults to the normal font.
What makes it worse is that I’m using an ultra-condensed font, so the default is realllly throwing things out of whack.
I would really appreciate any and all advice on this. I am not a coder by any means so I’m not even sure on how to start fixing it!
Here’s the link to my site: https://preview.webflow.com/preview/angusjames?utm_medium=preview_link&utm_source=dashboard&utm_content=angusjames&preview=bbee396e03f843f6925dbe31d93ff967&workflow=preview
Hi @Angus_James welcome to the community!
Each browser has slightly different font rendering engines. There are many fonts which aren’t quite web friendly, and it looks like you’re loading up EOT and TTF font variants. If possible, I highly recommend loading WOFF or WOFF2 variants of font files to websites.
Uploading the WOFF formats of the font to your site (if that font variant exists) and republishing should resolve the issue. Here is a more in-depth guide about uploading custom fonts to Webflow sites.
There are several font conversion tools out there, make sure that you’re within your licensing compliance though if you plan to go this route. I hope that this is helpful!
Thanks so much for replying! I’ve switched out the fonts for ones sourced through Adobe Fonts so the custom ones uploaded are no longer in use. My issue now is that the colour of the text is defaulting to black on the desktop version of Safari instead of being white like on all other browsers. Is there a way to rectify this?
@Angus_James I’m having trouble reproducing that behavior on my end in Safari, could you please send over a screenshot and let me know which browser version you’re using?
What page is it happening on? Thanks in advance for your reply!