How to customize and combine 2 fonts in VS Code?
Published: 2022-03-02 16:57:59

> 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`

```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](https://fonts.google.com/specimen/Roboto+Mono) and italic variant of [Operator Mono SSm](https://www.typography.com/fonts/operator/styles/operatormonoscreensmart).

As I have written in my previous [article](https://dev.to/kunaltanwar/how-to-change-vs-code-ui-font-in-windows-56mj) 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 :

```css
.mtki {
  font-family: 'Operator Mono SSm' !important;
}
```
![Example Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vwt1pofasmutrcd4xs8.png)

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

![Example Image 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwlpqz9jc7llbyvk0hg5.png)

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

![Result Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jawmlw8u4lctjtylcynu.png)

![Result Image 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5r4qk46df6q7pyw74nf.png)

#### Important Information
After each update of **VS Code** you need to repeat the entire process again.

<hr />

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

```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"
        }
      }
    ]
  }
}
```

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

![Result Image 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8n1ri6j2rckcsmx3bkw7.png)

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

![Result Image 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ntdhfwclfgjarppw686.png)

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

![Result Image 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xuidi9jjytbrfiu1j9su.png)
 
![Result Image 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzy3sul3s58vm4mfqj1w.png)