How to customize and combine 2 fonts in VS Code?

We as developers loves many monospace fonts.

Some fonts have good pair of "regular" variant and some ace in "italics".

So, today I will show you how you can combine regular and italic variant of 2 different fonts in VS Code.

Firstly in your settings.json

{
  "editor.fontFamily": 'Roboto Mono',
}

add any font you like. Personally I change my font every week or whenever I feel like changing.

For this I am combining Roboto Mono and italic variant of Operator Mono SSm.

As I have written in my previous article try to find workbench.desktop.main.css.

In windows you can find this file in the following PATH :
C:\Users\<username>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench

Now, If you were following along open that css file i.e. workbench.desktop.main.css. After opening the respective file make sure your code formatter is disabled because we need to save the minified version not the formatted one.

At the top of the css file create a class .mtki and add following :

.mtki {
  font-family: 'Operator Mono SSm' !important;
}

Don't forget to add !important in order to neglect default font.

Restart your VS Code. The result will look like this -

Important Information

After each update of VS Code you need to repeat the entire process again.

As I have also mentioned in title customize your VS Code. For that paste the following code in your settings.json.

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "entity.name.function",
        "settings": {
          "fontStyle": "bold"
        }
      },
      {
        "scope": "comment",
        "settings": {
          "fontStyle": "italic",
          "foreground": "#616161"
        }
      },
      {
        "scope": ["entity.other.attribute-name", "variable.parameter"],
        "settings": {
          "fontStyle": "italic"
        }
      }
    ]
  }
}