DEV Community 👩‍💻👨‍💻

Kunal Ukey
Kunal Ukey

Posted on

How To Change/Install Font In VS Code Editor (Windows)


Visual Studio Code is the most popular and the first choice among developers in terms of a code editor. 
We spent hours in VS code, and we may grow tired and bored of looking at the same font that VS code provides by default. 
Changing a font could help you, like better code vision, focus, and a fresh look.
So, let's see how to change or install a font in VS Code (windows).

Requirements:

  1. Visual Studio Code - Download Here
  2. Windows PC

1. Downloading Font

Google Fonts We will start by downloading the font for our code editor. You can download any of your favorite fonts but make sure that it is in the Monospace font category (although not mandatory).
Some of the popular font websites are:

2. Installing Font

Lato Font Installation Once you have downloaded and extracted a Font file, you can select your desired weight file and click on it. You will see a preview screen with each character. Just click on Install, given at the top left corner.

3. Check Installation

Font Settings Menu To check if the font is installed or not, you have to go to the font settings menu. To do so, press the windows key and search font settings. You should see the font settings shortcut, click on it.
Search for the font you have just installed. If you see the font, you are good to go! If not, try re-installing it and then restart your PC.

4. Add Font to VS Code

VS Code Settings Open VS code and goto settings. You can go to settings by pressing Ctrl + , together or by clicking File > Preferences > Settings.
In Font Family input field, type the font family name you just installed at the very start from the given font family names and then press Ctrl + S to save the changes.

5. Enable Font Ligatures

settings.json file If you are using some special font, then you might also want to enable the font ligature option in your code editor. To do so, again go to settings and search font ligatures in the search field or you can also click Text Editor > Font > Font Ligatures.
Click Edit in settings.json, a settings.json file should open.
Just change "editor.fontLigatures": false, to "editor.fontLigatures": true,

That's it!
If you still not seeing the changes, then just restart the VS code editor or restart your PC.

Thank you for reading! ❤

Top comments (1)

Collapse
 
fluentmoheshwar profile image
Moheshwar Amarnath Biswas

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.