Solution 1 :

To set the new font in Visual studio code follow the path given below:

Open VSCode -> Go to File option -> Preference -> Setting

You will come Here

enter image description here

There is a Font Family option where you can put your font name which you want.

To get the font’s you can go to Google fonts for a huge number of collections.

This font cannot get reflected on your website as it is restricted for VSCode only.
But to use different fonts on the website or application you can use
HTML link tag or you can download on your folder and use it.

For example,

Firstly, Select your Favourite font from google fonts.

enter image description here

You can download it or use as link in html file.

<link href="[email protected]&display=swap" rel="stylesheet">

enter image description here

You can use more than one font for your project.

All the very best for your HTML and CSS journey.

Solution 2 :

You can do that in 3 steps easily.

Step 1 – Download the required font (to get free and really good fonts is Google Fonts)

Step 2 – Install the downloaded font

Step 3 – Using Font settings in VS Code, you have change it as below.

  • In your VS code editor Go to File > Preferences > settings and search font.
  • Insert the name of the newly downloaded font
  • need to restart your PC before the changes take effect

Problem :

I want to know how to add a new font to VS Code, so I can set the font family to that specific font. (I want the text on the website to appear in that font)

I am new to HTML and CSS.


Comment posted by