1

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!

user2397282
  • 3,798
  • 15
  • 48
  • 94

2 Answers2

3

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;
user2397282
  • 3,798
  • 15
  • 48
  • 94
Chris Mills
  • 526
  • 5
  • 8
  • Yeah it is still visible to me https://jsfiddle.net/6wu6exbq/3/ . Do you not see the double e's here? – user2397282 Jun 05 '17 at 12:35
  • No, neither example has any shared ligatures for me, but it's good that they're visible for you in that example. Are they visible in both lines of text, the red and the green? Either way, it sounds like a browser-issue. Can you tell me which browser you're using? – Chris Mills Jun 06 '17 at 15:37
  • Yeah both lines it is visible. I'm using Chrome 58. – user2397282 Jun 06 '17 at 20:44
  • I've added a few more varied properties [to the JsFiddle](https://jsfiddle.net/Lymelight/6wu6exbq/10/) - do you still see double-E's on every single one of those strings? If so, I'm not sure what to suggest, beyond a browser update to Chrome 59? Out of curiosity, is your OSX language set to something other than English? – Chris Mills Jun 06 '17 at 21:29
  • Ahh! I only see the effect on the first two strings - the next three all look as intended. – user2397282 Jun 06 '17 at 21:34
  • Ah, that's excellent, so it's likely `font-feature-settings: "liga" 0;` property that will turn this off for your site. – Chris Mills Jun 06 '17 at 21:47
  • Yes thank you very much! I've edited your answer with this so I could mark it as an accepted solution but i'm not sure if the edits have been approved yet – user2397282 Jun 06 '17 at 21:51
0

I can't comment because my rep is too low, however, I tried to replicate your problem with no success:

JSFiddle

HTML

<p>
 Where's the beef?<br />
 BEEEEEEEEEEEF
</p>

CSS

@import url('https://fonts.googleapis.com/css?family=Amatic+SC');
body {
  font-family: 'Amatic SC';
  font-size: 40px;
}

Is it possible you have some sort of code running somewhere that combines the E's into one character? If you could show us in a codepen or fiddle, or provide steps to reproduce, that would be very helpful in getting your problem solved.

Herlander Pinto
  • 68
  • 7
  • I added a line of CSS to your code to change the letter spacing and it seems as though it works with the lowercase e's. https://jsfiddle.net/z8nfdzqh/1/ – user2397282 Jun 05 '17 at 12:33
  • Is it possible this is an issue with your browser? Have you tried other browsers and browser versions? I can't see it on my machines. – Herlander Pinto Jun 05 '17 at 14:40
  • Can't seem to see it on mobile using Chrome and Safari. Only works on my Mac, with Chrome and Safari, but not Firefox? – user2397282 Jun 05 '17 at 15:41