Resolving Font Rendering Issues on Safari.

In this blog I will be sharing my experience with font rendering issues that I faced with Safari browser. While developing a Shopify store I came across certain problems with accent characters on Safari browser.

These characters appear normal on devices except IOS or Mac browsers. Not sure how the Safari browser engine computes these character set but they all seem to appear perfectly fine on the Windows Chrome browser.

As you can observe that certain characters are in bold for some weird reason. I could not find the exact reason but I read somewhere that this may occur while copy pasting content from Word/Docx file to destination. Maybe the character encoding is altering? I still have no idea :(

The solution was simple after that, take the characters that are in bold and type them instead of copying them. I had a long document on my DOM so I used the replaceAll function to resolve this issue.

Other notable issues that you may find is font jarring or fonts are not bright enough (just on Safari). Now bare in mind that you cannot just increase the font weight and expect it look the same on Chrome or Moz. You can apply cheap hack like applying shadow to text but I would not recommend that. So, in such case you need to identify the browser agent and then based on that you can manipulate the CSS.

Thank You for reading.

Related posts:

In our second installment, we connect the physics of electrically charged gases to cosmic rays we observe on Earth. What might you say is the most insightful law in theoretical physics? 𝐸 = 𝑚𝑐²…

I am not talking about dollars and cents. There is absolutely no doubt that the phrase ‘put your money where your mouth is’ is being put into practice worldwide. There is an entire industry dedicated…

If you walk a path aligned with your inner voice, you'll see that the universe begins to show its infinite possibilities to you. As you offer value to the world, you'll see that it is returned.