Website font displaying ligatures on mobile

Design help General
1

For some reason when I check my website on my phone (safari on iOS), the text has some ligatures. I tried adding some custom code to the head tag of the project but it doesn’t seem to have any effect.

What’s a possible solution?

13%20PM

Here is my site Read-Only: LINK

2

Hi please provide a correct share link and also a link to the live published site.

TIA, Brandon

3

@QA_Brandon The link he shared was missing the semi colon after the http.

I had a look earlier and I was stumped.

https://preview.webflow.com/preview/goldenhourmedia?utm_medium=preview_link&utm_source=designer&utm_content=goldenhourmedia&preview=b4ee9652e4f5b7e503512cd0f7c9cd28&mode=preview

4

Hi @peej and @JSW,

Here are some other articles related to this Font specifically: Font Problem with Safari on mobile devices - #3 by Fabrice_Pohlmann

Here is a way to optimize your fonts too: css - Safari font rendering issues - Stack Overflow

TBH, the second one should probably be applied to all projects using non-supported Web Fonts outside of Google Fonts or Adobe Typekit Fonts.

Hope this helps you both.

Brandon

5

sorry, I fixed the link!