DEV Community

Cover image for How to customize and combine 2 fonts in VS Code?
Kunal Tanwar
Kunal Tanwar

Posted on • Updated on

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',
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Example Image

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

Example Image 2

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

Result Image

Result Image 2

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"
        }
      }
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

"scope" : "entity.name.function" will convert function name in bold letters.

Result Image 3

"scope": "comment" will make comments italic also change color.

Result Image 4

"scope": ["entity.other.attribute-name", "variable.parameter"] will make html attributes and function parameters italic.

Result Image 5

Result Image 6

Discussion (1)

Collapse
pawanbhatt profile image
Info Comment hidden by post author - thread only accessible via permalink
Pawan bhatt

Chor hai yeh baccha! Iski bhen ki bhushi

Some comments have been hidden by the post's author - find out more