Change VS code font and enable ligatures.

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:

• 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
• JetBrains Mono
• Fira Code
• Cascadia Code
• Victor Mono

Before and after adding Victor Mono

Font: Default

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

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

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
• Add the font family name

How to enable ligatures?

• Click Edit in settings.json
• 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
• SynthWave '84
• Night Owl
• Tokyo Night
• Winter is Coming Theme

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

My current VS code settings.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"
}