Intuition

I ran acorss this issue when I was testing a client’s website acorss different browsew, we use a font-family of Barlow Bold across the website for <b> or <strong> component to add a bit of visual highlight to the audience. After completed the development of the whole site mainly using chrome, I tested for the responsiveness and cross-browser via firefox and edge, of which all looks fine; Until I opened the website using safari, all the sudden all the text starting to look bolder and blurried.

After some play-around I found the similar issue occuring on “Google

2024-02-20T143534AESTimage-20240220143642548

A TLDR quick fix to make “safari and chrome font look the same” is to use one of the “web-safe front”, for instance “Arial”, like below:

2024-02-20T151741AEST2024-02-20T151823AEST



Reference