CODEWITHSUNDEEP
cssfonts
justinw
justinw

Reputation: 3976

Letters Connected in Safari

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

Upvotes: 1

Views: 970

Answers (2)

gtramontina
gtramontina

Reputation: 1136

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.

Upvotes: 7

relic
relic

Reputation: 1704

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; }

Upvotes: 0

Related Questions