Css: Disable Font Ligatures in All Browsers

CSS: Disable font ligatures in all browsers

Despite no-common-ligatures you can try values like none, unset or no-contextual . See MDN for all possible values.

For example:

:root {
  font-variant-ligatures: none;
}

Also it should be supported in all modern browsers.

Disabling font ligatures CSS (letter combining)

As it turns out, it's definitely possible, it just required some digging. As mentioned on MDN, you can turn off common ligatures:

font-feature-settings: "liga" 0;

This, however, is done by using an obscure css property. Instead, you should use font-variant-ligatures, like so:

font-variant-ligatures: none;

These two properties does the exact same thing, however, the latter one is recommended one.

MDN:

Note: Whenever possible, Web authors should use the font-variant shorthand property or an associated longhand property, font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position.

This property is a low-level feature designed to handle special cases where no other way to enable or access an OpenType font feature exists.

In particular, this CSS property shouldn't be used to enable small caps.

Prevent ligatures in Safari (Mavericks/iOS7) via CSS

We solved this by adding

 -webkit-font-variant-ligatures: no-common-ligatures;

to the css styles. It prevents the ligatures from appearing and thus the broken symbols in the font.

How to prevent a ligature at one, specific place?

Use the entity for the zero-width non-joiner character, and write the word in your HTML code as Hanf‌tierheft.

@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');

body {

  font-family: 'Libre Baskerville', serif;

  font-variant-ligatures: normal;

  font-size: 50px;

}

<p>Hanf‌tierheft</p>

Why does the HTML lang attribute change font ligatures and how can I avoid this?

f-ligatures are generally undesirable in German typography because they usually occur across compound words like the fl in auflagen or the fb in laufband. Some typographers follow the same rule in English as well, and some go further to avoid ligatures that would join two syllables together.

EB Garamond was designed by a German-speaking type designer who included localization features so that f-ligatures are completely disabled in texts that are flagged as German. If you want to manually apply ligatures to German text, don't change the lang= property to "en" or "". You can simply turn off the OpenType locl feature for a single word like this:

<h1 lang="de"><span class="de-liga">schachingerfilm</span> kamera und postproduktion</h1>

.de-liga {
  font-feature-settings: 'locl' 0;
}

This would effectively apply the liga OpenType feature to the fi in schachingerfilm because the locl feature is no longer preventing it.

---

Related Topics