CODEWITHSUNDEEP
cssfontsgoogle-font-apiligature
pachadotdev
pachadotdev

Reputation: 3775

CSS: Disable font ligatures in all browsers

As google fonts are blocked in China I had to download them and use FontSquirrel for conversion.

The problem: fi/ff/etc are ugly

I did all of the steps here Prevent ligatures in Safari (Mavericks/iOS7) via CSS but no cigar.

How can I disable ligatures at once? -webkit-font-variant-ligatures: no-common-ligatures; Doesn't work

Upvotes: 27

Views: 23593

Answers (4)

Qwertiy
Qwertiy

Reputation: 21450

Not sure why, but I found a situation when Chrome needs both properties:

body {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
}

If set any one of them only, ligatures won't be turned off.

Upvotes: 4

beardofprey
beardofprey

Reputation: 991

Essentially the same answer that andreas offered, but here's the full CSS for easy reference:

* {
  font-variant-ligatures: none;
}

Upvotes: 44

andreas
andreas

Reputation: 16936

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.

Upvotes: 20

SJT
SJT

Reputation: 1097

Seeing no effect in Safari from font-variant-ligatures (see comment on accepted answer above) have used

font-feature-settings: "liga" 0;

which both Safari and Chrome are honouring.

Upvotes: 2

Related Questions