Disabling font ligatures CSS (letter combining) - css

Question

Modern browsers automatically combine some letters, most commonly 'f' and 'i' to one single character called a ligature. This often optimizes legibility (i.e. easier to read), however sometimes this might not be what a designer wants.
Personally, I had this issue only in Chrome (Version 53.0.2785.101), I, although I cannot be sure, I believe this issue persists in all other versions of Chrome.
Chrome
f and i is combined multiple times
Edge
IE11
In this case I was looking for a way to turn it off.

Answer 1

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.

Answer 2

I encountered a similar problem and was directed here by Google.
I never want ligatures on any webpage.
(When I print a webpage to PDF and use the text-to-speech engine on my PDF reader, it skips speaking the ligatures.)
Here is one solution that works for me:
Open the webpage on Chrome/linux (may work on other desktop OSes too).
Install the StyleBot extension of Google Chrome. Then, in its options, click "styles" and then "edit global stylesheet". Enter the following (based on the answer of #AwesomeGuy).
body {
font-variant-ligatures: none;
font-feature-settings: "liga" 0;
}
Click "enable global stylesheet". Voila, Chrome never seems to render ligatures again (it renders the characters separately).
Also, when I ask Chrome to print web pages to PDFs, characters are rendered separately.

Answer 3

Add this as a bookmark and click once when printing.
javascript: void(function () {
var css = `
* {
font-variant-ligatures: none!important;
font-feature-settings: "liga" 0!important;
}
`;
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
/*This is required for IE8 and below.*/
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
/*It is not necessary to set a delay.*/
setTimeout(function () {
window.print();
}, 2000);
})()
Adding Javascript Applets to Chrome’s Bookmarks
https://clicknathan.com/2010/07/12/how-to-add-javascript-applets-to-as-google-chrome-bookmarks/
Open a New Tab in Chrome. Command+T on a Mac, Ctrl+T on a Windows.
Google Toolbar as seen in Chrome's New TabRight click on the Bookmarks Toolbar. It’s a gray colored box like the one pictured here.
Select “Add Page” from the contextual menu that appears.
Give the Bookmark a name. You could Google “Baby Names” if you can’t come up with one. I like Shepherd or Samson or even Samsonite if you have aspirations of a career in luggage design, sales or airport security.
Paste the Javascript applet into the URL field.
Save that son of a gun and you’re on your way to finishing this tutorial!