Search code examples
csssafarifont-face

Why is an embedded google map altering Safari's font rendering?


If you look at the footer on this page here in Safari, then look at the same footer on any other page, you'll see a difference in font rendering. It looks the the font smoothing is being applied twice to me.

If I turn off the Google map, then the font rendering returns to normal, so I'm confident the map is at the root of the problem.

I am applying a transparent font shadow to all text to fix some @font-face rendering issues (artefacts mainly), but this problem is present with or without text shadow.

It's a Mac only problem.

Has anyone else come across this problem? Is there a known cause and/or fix?


Solution

  • I've been tearing my hair out with this for the past few hours. You can fix it by adding

    -webkit-font-smoothing: antialiased;
    

    to the offending selectors.

    I hope this can save someone else the time and stress it caused me.