DEV Community

Cover image for Installing A New Font for VS Code - In THREE(3) Simple Steps
solexy79
solexy79

Posted on

Installing A New Font for VS Code - In THREE(3) Simple Steps

Most beginner developers like me at one point or the other, get tired of their default vs-code font. In fact, I just changed mine a few days back and I thought documenting the process will be a great idea for others that would like to follow suit and don't know how to get around it.

Step one (download the font)

A great resource to get free and really good fonts is Google Fonts. Although there are other great fonts out there, I recommend downloading the Fira Code font, because its one of the most preferred font by developers and also because its my personal favorite for now .

Alt Text

Click on download family button and a zip file should be downloaded on your PC.

Step two (installing the font)

Navigate into the newly downloaded font zip file and you should have a screen like this.

Alt Text

Click install and now you have the font installed on your PC

Step three (using font in VS CODE)

In your VS code editor Go to File > Preferences > settings and search font.

Alt Text

Insert the name of the newly downloaded font("Fira Code") before other default fonts and voila!! you have successfully installed a new font for your vscode editor ...

Alt Text

wait a moment.... another thing to note is that, you might need to restart your PC before the changes take effect

Bonus

you might want to enable font ligatures also, it also makes font look great...

Conclusion

The default vscode font is not bad, but changing your font can make you feel more at home in your code editor and even increase the excitement to code. Happy Coding!!

Discussion (8)

Collapse
_dehbie profile image
Omobolade

Nice! Easy to understand

Collapse
katrinadierking profile image
Katrina Dierking

I have fonts installed on my PC and followed these steps but VSCode can't find them.

Collapse
quantme profile image
Quantme

In the case of some fonts it's hard to know what name it must be typed; in my case (Windows) the setting that works in settings.json file is wrapping the font name in single quotation marks:

{
  "editor.fontFamily": "'Fira Code', 'Fira Code Retina', 'Fira Code Light', 'Courier New', monospace"
}
Enter fullscreen mode Exit fullscreen mode
Collapse
ammarsherif profile image
Ammar Sherif Mohammed

you should restart vs code

Collapse
amit_savani profile image
Amit Patel
Collapse
nguyenit67 profile image
Nguyen • Edited on

Thanks so much mate! It's so helpful! It just works right straight away!

Collapse
ahamedsajeeth profile image
Ahamed Sajeeth

nice

Collapse
zfter profile image
zFter

It's very go well :)