Search code examples
htmlcssfontscharacter-encodinggoogle-webfonts

Amatic SC font - Rendering 'ee'

I'm having an issue with the Amatic SC font, specifically when trying to render two 'e' characters next two each other.

As you can see on the google fonts page, it should look like this.

enter image description here

However, on my website I get this effect:

enter image description here

It may be hard to see, but the two 'e' characters have been joined together as one character. When highlighting the text, they act as one character.

In addition, if I print out a long string of characters like 'eeeeeeee' and increase the letter spacing, you can clearly see the problem.

enter image description here

I can't seem to find any information on this, so any help is greatly appreciated as it is quite annoying!

Solution

  • I can't reproduce this error, but as per an older Stack Overflow answer, this issue (which is a typographic ligature issue), was previously produced due to a Safari bug with some fonts.

    Try adding to your stylesheet for the affected elements:

     -webkit-font-variant-ligatures: no-common-ligatures;
  text-rendering: optimizeSpeed;

    You can check to see if the issue is still present with and without these properties in your browser:

    JSFiddle.

    If the issue isn't present in either element, it might mean there's some other property on the element on your site that is causing this issue.

    EDITED THE ANSWER SO I CAN MARK AS SOLUTION

    I'm not entirely sure why this worked, but adding the following CSS to the relevant tags fixed this problem:

    -webkit-font-feature-settings: "liga" 0;
font-feature-settings: "liga" 0;