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?
Before and after adding Victor Mono
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 thenFont
- 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",
tosettings.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
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"
}
Top comments (0)