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
Spread the love, Share this Article!

Subscribe to Our YouTube Channel!

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 seems 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 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 fonts 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.

VS Code editor
VS 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.
𝗟𝗶𝗻𝗸: 𝗵𝘁𝘁𝗽𝘀://𝗴𝗶𝘁𝗵𝘂𝗯.𝗰𝗼𝗺/𝘁𝗼𝗻𝘀𝗸𝘆/𝗙𝗶𝗿𝗮𝗖𝗼𝗱𝗲

Fira code vscode fonts
Fira code vscode fonts

After that Download the Fira Code Visual Studio Code font family zip file as shown in the image below:

Download Fira code vs code font zip file
Download Fira code vs code font zip file

Step 3 – How to install font family in VS Code

After downloading the font files install the font family in your computer. Open ttf and double click each file and click “install font”, you can select all files at once as shown in the image below.

How to install font family VS Code

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 settings as shown in the image below.

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
VS Code JSON settings
VS Code JSON settings

Now we have Done!!!

Support Me!!!

I Love to Drink Coffee!

Need Your Support!

Hey, If this free content is helpful to you, Please Consider buying me a coffee as a tip. Your little help will appreciate me create more free content for you!

Final Words

With VS code currently taking the market by storm, the beauty of this product is that it provides several features which 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. By updating the font in VS code, it will continue improving your writing or coding experience

Hit The Subscribe Button to Get Daily New video!

Spread the love, Share this Article!

Important Tags:

Leave a Reply

Your email address will not be published.