Enable Font Ligatures in MkDocs Material

Font ligatures are disabled by default in Material for MkDocs, but enabling them is very simple and straightforward. To get started, you must first select a font that supports ligatures, such as “Fira Code” or “JetBrains Mono”. Then, add the following code to mkdocs.yml in order to set the font:

theme:
  font:
    code: JetBrains Mono

If you need more information on changing fonts, you can refer to the documentation.

To enable ligatures, the following code should be added to you extra stylesheet file, for example docs/stylesheets/extra.css:

.md-typeset code,
.md-typeset kbd,
.md-typeset pre {
  font-feature-settings: "kern", "liga";
  font-variant-ligatures: normal;
}

Finally, you must enable the extra CSS in mkdocs.yml in order for the ligatures to be applied properly:

extra_css:
  - stylesheets/extra.css

Once this is done, all of your snippets will be enabled with ligatures. This is a great way to make your code snippets more visually appealing and easier to read.