How to Install Font Family in VS Code Editor

how to install font family in visual studio code
how to install font family in visual studio code

Share this Article!

How to Install Font Family in VS Code

I have created this blog post on How to Install Font Family in VS Code font syntax and different ways to install and use a font family in it. Some web developers want to change the font family in VS Code. the Fira Code font family for Visual Studio Code is the most popular font used by Software developers in Visual Studio Code.

At first, font family installation seemed like a complicated process. But when you get the hang of the basics, it will be easy to choose and install the font family in VS Code you want.

What are VS Code Fonts?

VS Code is a popular code editor tool. It allows you to process, debug, and develop code quickly and easily. If you like to change text font style using the editor, then you can do so using VS Code settings. You can also change the font color, text size, or background color of the text using settings.

How to Change Font Style in VS CODE (Video Tutorial)

If you want to know how to download and install the Fira Code fonts for your VS Code editor then this VSCode video tutorial is for you. You will learn how to replace your default VS Code font family with Fira Code Fonts and how to download and set up a new font family in Visual Studio Code JSON settings.

How to Change Font Style in VS CODE

Steps to Install Font Family in VS Code

There are two ways of installing fonts in VS code, one is to open the user settings to install new fonts and one is to install the font first and then open the user settings to change the font styles.

To install the font family in vs code editor, simply execute the following steps:

  1. Open Your VS Code editor.
  2. Go to Google or any internet browser
  3. Go to the following link to Download the Fira Code fonts family
  4. Install the Fira code font family on your Computer.
  5. Go to VS Code settings and open the settings.json option.
  6. Copy and paste the below code lines to enable the new Fira Code font settings
    • “editor.fontFamily”: “Fira Code”,
    • “editor.fontLigatures”: true,
  7. Now, restart your VS Code editor to apply the font changes

Recommended For You!

Next, I am going to explain the above steps with screenshots!

Step 1

Open your VS Code editor window to install the font family.

Visual Studio Code editor
Visual Studio Code editor

Step 2

Open Google and go to the following link to Download the Fira Code fonts family, which is the most popular font style among software developers.
𝗟𝗶𝗻𝗸: 𝗵𝘁𝘁𝗽𝘀://𝗴𝗶𝘁𝗵𝘂𝗯.𝗰𝗼𝗺/𝘁𝗼𝗻𝘀𝗸𝘆/𝗙𝗶𝗿𝗮𝗖𝗼𝗱𝗲

vscode font family fira code
VsCode font family fira code

After that Download the Fira Code Visual Studio Code font family zip file.

Step 3 – How to install font family in VS Code

After downloading the font files install the font family on your computer. Open the folder click each file and then click the “install font” option, You can select all files at once as shown in the image below.

VsCode font family install

Step 4

Now, open your VS Code settings and go to JSON settings as shown in the image below:

VS Code JSON settings
VS Code JSON settings

After that copy the below code lines and paste them into the JSON code settings as shown in the image below.

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
vs code font family install code

Now we have Done!!!

Final Words

With VS code currently taking the market by storm, the beauty of this product is that it provides several features that make it easier to write and code.

Like many other Windows text editors, VS code provides an option to change and update the font it uses. Updating the font in VS code will continue improving your writing or coding experience.

Share this Article!

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe Our YouTube Channel!

Follow for Latest Updates