CSS: Disable font ligatures in all browsers

Question

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

Distributee

Google fonts are block in China! Wow!! Thanks for pointing that out. Very useful. I know that Google jQuery CDN is blocked in China, which is why I use jquery.com CDN instead, but I hadn't made the connection to Google Fonts. Thanks, again. (And sorry, I don't have an answer to your question.) – Katerine

Currently, Safari Developer Tools shows -webkit-font-variant-ligatures as an invalid CSS selector. It recognises font-variant-ligatures as a valid selector, as Andreas offers, but does not honour it. – Kaffraria

Answer 1

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.

Kirov

Failing in Safari 15.0 16612.1.29.41.4, 16612) on macOS 11.6. Developer Tools shows font-variant-ligatures: none as valid and applied, but toggling the rule has no effect. Font family 'Consolas', SFMono-Regular, Menlo, 'Droid Sans Mono', monospace. – Kaffraria

@Kaffraria Have you tried with the -webkit- prefix? Is it the same behavior (sorry I currently don't have any Safari to test with)? – Kirov

Yes, see my comment on OP. – Kaffraria

where do I put that code? Do I need to own the website hosting the page and put that in the page? Can I do that on the client side, in the browser. Where do I put that code in my browser, e.g. Firefox or Brave? – Titograd

@AbhishekAnand This is CSS. If you have access to the website files, you can add it to a dedicated CSS file (e.g. styles.css) or in between <style>...</style> tags in a HTML file. If not, you can also inject custom CSS via a browser add-on. – Kirov

thanks. the Stylus add on worked for me in Firefox. – Titograd

Answer 2

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

* {
  font-variant-ligatures: none;
}

Outsize

Answer 3

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.

Knife

Answer 4

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.

Kaffraria

developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings – Defamation