Changing the code font family and size in Visual Studio Code

Aakash Haider
2 min readFeb 10, 2021


Being a developer we have to do allot of coding, and if our visual studio code editor is not configured correctly, then it may cause a huge trouble for our sight.

In this story we’ll learn how to setup the font family and font size that suitable for our sight. So without wasting time in forewords, let’s jump into some practical.

Following are the steps that you have to follow:


Open Visual studio code and press ⌘+⇧+p . This will open up the preferences options.



Now type Settings in the search bar:

Type Settings in search


Select Open Settings(JSON) :



Now in the Json file as mentioned above, find the editor.fontFamily & editor.fontSize, replace the font family with the font you want, if that font is already installed in your computer than that’s great, in other case you have to first install the required font in your computer, you can get one of your choice from Google Fonts.

Once the font is installed you can now replace the font name in double quotes with your desired font, and for size just replace the editor.fontSize value with the value that best matches your requirement.

Make sure that the font name should match with the name of font file that you have just installed.

Font changed

Great, you have successfully change the look and feel of your editor. 👏

Happy Coding 👨‍💻



Aakash Haider

🚀 Passionate React Native Developer | JS Enthusiast | Open Source Contributor 🌍