Turning off font ligatures in CSS (letter connections deactivation)

Question

Turning off font ligatures in CSS (letter connections deactivation)

Typically, modern web browsers will automatically merge certain letter combinations, such as 'f' and 'i', into a single character known as a ligature. While this can enhance readability, it may not always align with a designer's preferences.

I personally encountered this problem in Chrome (Version 53.0.2785.101). Although I cannot guarantee, it seems likely that this issue exists in other versions of Chrome as well.

Chrome: https://i.stack.imgur.com/fmNEr.png 'f' and 'i' are combined multiple times

Edge: https://i.stack.imgur.com/rYdkH.png

IE11: https://i.stack.imgur.com/l4Yti.png

In this particular scenario, I sought a solution to disable this feature.

css google-chrome fonts

Answer 1

Answer №1

After some investigation, it became clear that achieving this was indeed possible with a bit of effort. According to MDN, you can disable common ligatures by using the following CSS:

font-feature-settings: "liga" 0;

However, a more recommended approach would be to utilize the font-variant-ligatures property instead:

font-variant-ligatures: none;

Both properties achieve the same outcome, but the latter one is preferred.

As mentioned on MDN:

Note: It is advisable for web developers to use the font-variant shorthand property or its corresponding longhand properties like font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric, or font-variant-position whenever possible.

The usage of this property should be limited to specific cases where other methods of enabling OpenType font features are unavailable.

This CSS property should not be employed for enabling small caps in fonts.

Answer 2

After some investigation, it became clear that achieving this was indeed possible with a bit of effort. According to MDN, you can disable common ligatures by using the following CSS:

font-feature-settings: "liga" 0;

However, a more recommended approach would be to utilize the font-variant-ligatures property instead:

font-variant-ligatures: none;

Both properties achieve the same outcome, but the latter one is preferred.

As mentioned on MDN:

Note: It is advisable for web developers to use the font-variant shorthand property or its corresponding longhand properties like font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric, or font-variant-position whenever possible.

The usage of this property should be limited to specific cases where other methods of enabling OpenType font features are unavailable.

This CSS property should not be employed for enabling small caps in fonts.

Answer 3

Answer №2

I had a similar issue and found my way here via a Google search. I really dislike ligatures appearing on any website. (I noticed that when I convert a webpage to PDF and use the text-to-speech feature, it skips over the ligatures.) Luckily, I discovered a solution that works well for me:

Simply open the webpage using Chrome on Linux (this method may also work on other desktop operating systems). Install the StyleBot extension for Google Chrome. Then, go to its settings, select "styles", and click on "edit global stylesheet". Input the following code (borrowed from the answer by @AwesomeGuy).

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

Make sure to activate the global stylesheet. Voilà, Chrome will no longer display ligatures (characters will be shown separately). Additionally, when printing web pages as PDFs in Chrome, characters are displayed individually.

Answer 4

I had a similar issue and found my way here via a Google search. I really dislike ligatures appearing on any website. (I noticed that when I convert a webpage to PDF and use the text-to-speech feature, it skips over the ligatures.) Luckily, I discovered a solution that works well for me:

Simply open the webpage using Chrome on Linux (this method may also work on other desktop operating systems). Install the StyleBot extension for Google Chrome. Then, go to its settings, select "styles", and click on "edit global stylesheet". Input the following code (borrowed from the answer by @AwesomeGuy).

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

Make sure to activate the global stylesheet. Voilà, Chrome will no longer display ligatures (characters will be shown separately). Additionally, when printing web pages as PDFs in Chrome, characters are displayed individually.

Answer 5

Answer №3

Make sure to save this as a bookmark and only click once when you're ready to print.

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 necessary for IE8 and earlier versions.*/
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }
    head.appendChild(style);
    /*You can opt not to set a delay here.*/
    setTimeout(function () {
        window.print();
    }, 2000);
})()

Instructions on Adding Javascript Applets to Bookmarks in Chrome

Open a New Tab in Chrome. Use Command+T on a Mac, Ctrl+T on a Windows.
Right-click on the Bookmarks Toolbar within Google Toolbar, located on Chrome's New Tab page.
From the contextual menu, select “Add Page”.
Name your Bookmark appropriately. If you need ideas, consider searching for “Baby Names” or choose names like Shepherd, Samson, or even Samsonite for luggage related inspirations.
Paste the Javascript applet into the URL field.
Save your new Bookmark and you're all set to complete this tutorial!

Answer 6

Make sure to save this as a bookmark and only click once when you're ready to print.

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 necessary for IE8 and earlier versions.*/
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }
    head.appendChild(style);
    /*You can opt not to set a delay here.*/
    setTimeout(function () {
        window.print();
    }, 2000);
})()

Instructions on Adding Javascript Applets to Bookmarks in Chrome

Open a New Tab in Chrome. Use Command+T on a Mac, Ctrl+T on a Windows.
Right-click on the Bookmarks Toolbar within Google Toolbar, located on Chrome's New Tab page.
From the contextual menu, select “Add Page”.
Name your Bookmark appropriately. If you need ideas, consider searching for “Baby Names” or choose names like Shepherd, Samson, or even Samsonite for luggage related inspirations.
Paste the Javascript applet into the URL field.
Save your new Bookmark and you're all set to complete this tutorial!

Turning off font ligatures in CSS (letter connections deactivation)

Answer №1

Answer №2

Answer №3

Similar questions

Placing an emblem after the header wording

Can an image be allowed to overflow outside of a div without changing the div's size?

Failed validation for Angular file upload

Switching the theme color from drab grey to vibrant blue

Placing two tables in an HTML document

Can we modify the cell width in knitr and pandoc?

Updating CSS for dropdown menu in Fluent/Fabric design

react-datepicker displaying error message "Preventing default action not possible within a passive event listener invocation"

Passing a value from a prop to a click event that is dynamically created within an SVG Vue.js

Difficulty with navigation on Chrome for Android (also impacting Bootstrap's website and all other sites utilizing Bootstrap design)

Moving icon that appears when hovering over a menu button

The sticky navigation bar allows for the overlapping of additional div elements

Flexbox divs that adapt to different screen sizes

CanvasJS with a see-through background

Disabling Javascript in Chrome (-headless) with the help of PHP Webdriver

Displaying mysqli results within a div while incorporating an onclick event for a javascript function that also includes another onclick event for a separate javascript function

Creating a blur effect on an image tag when hovering using CSS and HTML

Stable Banner with Automatic Scroll to Sections

Customize the appearance and text in the navigation bar

Setting up button value dynamically according to dropdown selection in Angular 2