CODEWITHSUNDEEP
cssfontssafarikerningletter-spacing
l4isol
l4isol

Reputation: 11

Safari font kerning broken when wrapping letters into spans

I'm facing an issue with my font kerning. I have a word where each letter is wrapped in a span element but on Safari the kerning of each letter is broken. It works perfectly in every browser but Safari and I can't figure out why.

Here is a simple snippet:

<h1>GOYAYA</h1> 
<h1> <span>G</span><span>O</span><span>Y</span><span>A</span><span>Y</span><span>A</span> </h1>

So the first `~ has the correct kerning for each letter with no problem but the second where each letter is wrapped with span then breaks:

On Safari:

Safari

On Chrome:

Chrome

And here is the CodePen just in case.

I tried all this CSS without any results:

text-rendering: optimizeLegibility !important; 
font-feature-settings: 'kern' !important; 
font-kerning: normal !important; 
font-smoothing: antialiased !important; 
backface-visibility: hidden !important;

And I have no idea why Safari would behave differently.

Upvotes: 1

Views: 180

Answers (0)

Related Questions