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

Vertically Center Image in a Div

What is preventing my image from moving upwards?

Tips for refreshing CSS following an ajax request

Tips for enabling background scrolling when Popover is displayed: (React, React Native, Native-Base)

Flexslider doesn't adjust the height of the viewport when displaying a shorter image in the slideshow

What could be causing ReactNative Dimensions component to display lower resolutions?

Error TS2307: Module './tables.module.css' or its type declarations could not be located

Adapting a CSS design

Is there a way to initiate a jquery function upon loading the page, while ensuring its continued user interaction?

Is there a way for me to determine if a user has engaged with a form?

Styling images side by side with CSS in Internet Explorer

Achieving True WYSIWYG Performance in TinyMCE 4.x: Tips and Tricks

Creating an SVG element that adjusts to the size of its parent container: tips and tricks

Retrieve data from HTML in order to apply styling to an element

Incorporating list view separators using JQuery Mobile

What is the process for encoding images in HTML code?

Is there a way to delay loading 'div' until a few seconds after the 'body' has been fully loaded?

Establish a vertical column that matches the height of its parent element

A guide to incorporating external CSS files in Angular 5 components using styleUrls

Creating CSS-in-JS Components in React JS without External Stylesheet interference