1

Some characters in my font are connecting to adjacent characters. This behavior is present in Safari 7.0.4 and Chrome 35.0.x; it is not present in Firefox. Below is a screenshot of the behavior. And here is a fiddle of it.

This issue is that the 'F's' and the 'i's' are sticking together. I am able to prevent this in Chrome by using -webkit-font-feature-settings: "liga" 0; which disables common ligatures, but this has no effect in Safari (which is what I am trying to 'fix').

Letters Connected in Safari

justinw
  • 3,856
  • 5
  • 26
  • 41
  • 1
    Safari must be using a *better* font drawing routine; one that recognizes [typographic ligatures](http://en.m.wikipedia.org/wiki/Typographic_ligature) defined in the font. That said, if it does so by default, there must be a way to tell it to not do so. – Jongware Jun 24 '14 at 17:41
  • Check this out: [http://css-tricks.com/almanac/properties/t/text-rendering/](http://css-tricks.com/almanac/properties/t/text-rendering/). Replace `text-rendering: optimizeLegibility;` with `text-rendering: optimizeSpeed;` and it works in Safari as well. -- I've edited my answer to include this explanation. – gtramontina Jun 25 '14 at 20:30

2 Answers2

7

From your image, it does not look like a letter-spacing issue, as your first idoes not have the dot on top of it. You might have the css property font-variant-ligatures set to common-ligatures. Try setting it to no-common-ligatures.

EDIT:

Based on the provided jsfiddle, replacing text-rendering: optimizeLegibility with text-rendering: optimizeSpeed; solves your problem.

Here's a more detailed explanation on text-rendering.

gtramontina
  • 1,096
  • 9
  • 10
  • `font-variant-ligatures: no-common-ligatures;` has no effect on the connected letters. Any other ideas? – justinw Jun 25 '14 at 19:50
  • do you mind putting a jsbin/jsfiddle together so we can take a look at? – gtramontina Jun 25 '14 at 19:53
  • Did this solution affect the fiddle on your side in Safari? I tried replacing it with `text-rendering: optimizeSpeed;` and removing `text-rendering: optimizeLegibility` and it doesn't have an effect on my local site or the [fiddle](http://jsfiddle.net/fQXV9/4/). – justinw Jun 25 '14 at 22:29
  • In the end what worked was your first solution, which I (admittedly absent minded-ly) forgot to at `-webkit-` to the front of. `-webkit-font-variant-ligatures: no-common-ligatures;` solved this problem in safari; here is a [fiddle](http://jsfiddle.net/fQXV9/5/). I can or you can edit your answer to make the solution more clear. Thanks again! – justinw Jun 25 '14 at 22:45
  • 1
    I had a similar problem and the `font-variant-ligatures` solution solved it. My issue was with one particular font, where if you typed something like "zxcv sand" - safari would not render the "s" in "sand" (or it might render it underneath the "a", leading to gibberish). Using an uppercase "S" did not have the same problem, it only happened with lowercase. It didn't matter what the 2nd letter was. In any case, this fixed it, so thanks from nearly 9 years later :) – Mike Willis Jun 13 '23 at 19:05
0

Has to do with font rendering engines in different browsers acting differently.

Stupid fix is to just add letter-spacing:

letter-spacing: 1px; // feel free to get crazy in how you decide what spacing value to use.

Smart-ish fix is to detect safari and add letter-spacing.

Best fix is to use a good web-standard font that doesn't have this problem.

UPDATE: I'm noticing the space after your 'F's is not the same as the space after every other character. That makes me wonder if there's something wrong with your font file. But anyway, how about something like this:

<h1>E<span>ff</span>iciently</h1>

h1 { letter-spacing: 4px; }
h1 span { letter-spacing: 6px; }
Community
  • 1
  • 1
relic
  • 1,662
  • 1
  • 16
  • 24