24

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

Community
  • 1
  • 1
pachadotdev
  • 3,345
  • 6
  • 33
  • 60
  • 1
    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.) – Michael Benjamin Aug 12 '16 at 20:48
  • 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](https://stackoverflow.com/users/4952806/andreas) offers, but does not honour it. – SJT Oct 10 '21 at 11:25

4 Answers4

35

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

* {
  font-variant-ligatures: none;
}
Murat Çorlu
  • 8,207
  • 5
  • 53
  • 78
beardofprey
  • 901
  • 1
  • 7
  • 4
14

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.

andreas
  • 16,357
  • 12
  • 72
  • 76
  • 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. – SJT Oct 10 '21 at 11:22
  • @SJT Have you tried with the `-webkit-` prefix? Is it the same behavior (sorry I currently don't have any Safari to test with)? – andreas Oct 10 '21 at 12:20
  • Yes, see my comment on OP. – SJT Jan 25 '22 at 12:10
  • 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? – Abhishek Anand Jul 02 '23 at 23:48
  • @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 `` tags in a HTML file. If not, you can also inject custom CSS via a browser add-on. – andreas Jul 03 '23 at 07:36
  • thanks. the Stylus add on worked for me in Firefox. – Abhishek Anand Jul 03 '23 at 15:03
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.

Qwertiy
  • 19,681
  • 15
  • 61
  • 128
2

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.

SJT
  • 1,067
  • 5
  • 10