This tutorial is beginner friendly so if you already know about fira code you might want to skip this part and move to Using Fira Code and Ligatures.

For those who are not familiar with fira code, it is one of the most popular fonts for coding, and the reason for that is - not only it’s an artistic font, it also provides Ligatures which are symbols for common programming multi-character combinations.

Let’s take a look at some examples

Character Combination: ->

Ligature:

->

Character Combination: !=

Ligature:

!=

Character Combination: ==

Ligature:

==

There’s no reason to discuss all the details about the font, head to wikipedia for more information or go to the FiraCode GitHub link if you want to use fira code anywhere else and for other examples of ligatures and use cases.

Using Fira Code and Ligatures

@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');

.input_area pre, .input_area div, code {
  font-family: 'Fira Code' !important;
  font-variant-ligatures: initial !important;
}

Add these lines in /_sass/minima/custom-styles.scss at root of your repository and you are good to go.

Fira Code font is only used in code cells of both notebook and markdown
Clear browser cache and wait for github actions to finish executing if the effects do not appear immediately

Use this link to get my other font-styles and if you decide to create a new font-style.scss file as in my case, do not forget to add @import "minima/font-style"; in custom-styles.scss