Change VS code font and enable ligatures.
Tags: vscode, font, webdev
Published: 2022-01-24 00:59:28

To add and use new fonts in VS code we first have to download the font into our computer, add it to the system and then add it VS code.

In this example, I'm going to be adding the font `Victor Mono` to a Mac. The process for Windows should be the same except the part of adding the font to the system.

## What are ligatures?

- Have you ever seen a tutorial and the symbols look different? This are called ligatures.
- Examples:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52r36jiyfyql2w0jsp0i.png)
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mb4ysz562axp7k40h7aq.png)
 
- In writing and typography, a ligatures occurs where two or more letters are joined to form a single glyph.

### What type of fonts have ligatures?

- [Cascadia Code](https://github.com/microsoft/cascadia-code)
- [JetBrains Mono](https://github.com/JetBrains/JetBrainsMono)
- [Fira Code](https://github.com/tonsky/FiraCode)
- [Cascadia Code](https://github.com/microsoft/cascadia-code)
- [Victor Mono](https://rubjo.github.io/victor-mono/)

## Before and after adding Victor Mono

Font: Default
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wihlx1pfyiri4t1bdup0.png)

Font: Victor Mono Default (font weight normal + font size 14)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6t6bbu6lknt0w3zttdi9.png)

In my case I thought it looked too thin, and change the font weight to bold and increase the font size.

Font: Victor Mono + font weight bold + font size 16

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

## How to add fonts to Mac?

- Download the font
- Open `Font Book` app
- Click `+` icon and select the font you download

## How to add fonts to VS code? 

- Open VS code settings, select `Text Editor` and then `Font`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hn2nrusdxt3ggqehvdbl.png)
- Add the font family name
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcm9eum07yg9m3dkzbvb.png)


## How to enable ligatures?

- Click `Edit in settings.json`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3rzj01k8jk8eh5g3ciz.png)
- Add `"editor.fontLigatures": true,`

## How to enable bold fonts?

- Add `"editor.fontWeight": "bold",` to `settings.json`.

##  Change VS code themes?

- Change VS code themes is very easy. You can do it from the  marketplace and select the theme you want to download, or you can search in VS code IDE. I prefer the first one.

##  My current favorite themes

- [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)
- [SynthWave '84](https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode)
- [Night Owl](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl)
- [Tokyo Night](https://marketplace.visualstudio.com/items?itemName=enkia.tokyo-night)
- [Winter is Coming Theme
](https://marketplace.visualstudio.com/items?itemName=johnpapa.winteriscoming)

You can search for more themes at https://vscodethemes.com/

## My current VS code `settings.json`:

```json
{
  "workbench.colorTheme": "Shades of Purple",
  "editor.fontSize": 16,
  "oneDarkPro.italic": true,
  "workbench.iconTheme": "vscode-icons",
  "workbench.sideBar.location": "right",
  "editor.formatOnSave": true,
  "prettier.jsxSingleQuote": true,
  "editor.tabCompletion": "onlySnippets",
  "editor.tabSize": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "html.format.wrapLineLength": 140,
  "javascript.format.semicolons": "insert",
  "prettier.singleQuote": true,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "tabnine.experimentalAutoImports": true,
  "editor.minimap.enabled": false,
  "editor.fontFamily": "\"Victor Mono\", Menlo, Monaco, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.fontWeight": "bold",
  "terminal.integrated.fontFamily": "monospace",
  "cSpell.language": "en,lorem"
}
```