Letter spacing incorrect for one word only

Question

When using letter-spacing we get the expected result, except for one part of the text and only on mobile (android and iphone).

This is the desired result on desktop:

And this is how it looks on mobile; notice the "finest"

There is nothing special in the code:

<div>
  <p>It's a way of life</p>
  <p>Ibiza's finest villas</p>
</div>

And the CSS on the div:

font-family: 'KremlinW08-ExpandedDemi';
font-style: italic;
letter-spacing: 9.0pt;

Any suggestions on how to solve it and what might be causing it?

try `font-variant-ligatures: no-common-ligatures;` (or `none`) (https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures) — Fabrizio Calderan, Jan 10 '20 at 10:39
@RevtiShah I guess I photoshopped the issue then just so I could ask a question? — Hugo Delsing, Jan 10 '20 at 11:18

score 1 · Accepted Answer · answered Jan 10 '20 at 11:26

1

It is a behaviour due to the ligatures of this font between f and i (and probably also between other characters)

Try applying font-variant-ligatures: no-common-ligatures;

Reference on MDN

answered Jan 10 '20 at 11:26

Fabrizio Calderan

1 Answers1