How do I add a new font of my choice into Visual Studio code?

Question

I am fairly new at coding and I'm struggling with the following issue. I have searched numerous times online on how to change the fonts in VScode to match the different fonts being used on a project of mine.

I've tried the suggestions on this post already but I still cannot see the fonts I selected and I cannot use them after going into "file > preferences > user settings" and overriding "editor.font-family":

I have downloaded the following fonts on to my desktop already. Here are the fonts I would like to insert into the site I am working on.

• titilliumtext14l-600wt.otf
• OpenSans-Semibold.ttf
• OpenSans-Regular.ttf
• Myriad-Pro_31655.ttf

Here are the "Default Settings"

// Overwrite settings by placing them into your settings file. // See http://go.microsoft.com/fwlink/?LinkId=808995 for the most commonly used settings. {

// Editor

// Controls the font family.
"editor.fontFamily": "Consolas, 'Courier New', monospace",

// Controls the font weight.
"editor.fontWeight": "normal",

// Controls the font size in pixels.
"editor.fontSize": 14,

I'm not sure if it is necessary to include what I have in my "main.css" but here it is just in case.

/** Fonts **/
@font-face {
    font-family: Titillium, Arial, sans-serif;
    src: url('../assets/fonts/gotham-thin-webfont.eot');
    src: url('../assets/fonts/gotham-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../assets/fonts/gotham-thin-webfont.woff2') format('woff2'),
         url('../assets/fonts/gotham-thin-webfont.woff') format('woff'),
         url('../assets/fonts/gotham-thin-webfont.ttf') format('truetype'),
         url('../assets/fonts/gotham-thin-webfont.svg#gotham_thinregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: Archivo Narrow, Arial, sans-serif;
    src: url('../assets/fonts/gotham-black-webfont.eot');
    src: url('../assets/fonts/gotham-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../assets/fonts/gotham-black-webfont.woff2') format('woff2'),
         url('../assets/fonts/gotham-black-webfont.woff') format('woff'),
         url('../assets/fonts/gotham-black-webfont.ttf') format('truetype'),
         url('../assets/fonts/gotham-black-webfont.svg#gotham_blackregular') format('svg');
    font-weight: bold;
    font-style: normal;
}

/** Global **/
html, body{
    background-color:#fff;
    color:#000;
    font-family: Titillium web, Arial, sans-serif;
    overflow-x:hidden;
    font-weight:light;
}
h1, h2, h3, h4, h5{
    font-family:latoregular;
}
h1{
    font-size: 50px;
    font-weight:bold;
    color: #fff;
}
h2{
    font-size: 24px;
    color: #000;
    font-family: sans-serif;
}
h2 span, h3 span{
    color:#ff8200;
}
h3{
    font-size:24px;
}
h4{
    font-size:18px;
}
h5{
    font-weight: bold;
    font-size:20px;
    font-family:latoregular;
    font-weight:lighter;
    margin-bottom: 40px;
}
p{
    font-size: 16px;
    line-height: 2.0;
}

Crocidolite

what exactly are you trying to change the font of? Of VS Code? Of a web page that you are developing using VS Code? – Huertas

Answer 1

The settings that you changed are related to Visual Studio Code itself, you are changing Visual Studio Code's font.

To use a font for your website, you can add Google Fonts API into your header like this:

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />

Afterwards, go to your css file:

font-family: "Open Sans";

Cockoftherock

Answer 2

First install the font on your machine if necessary. Then, in your user settings JSON file (File > Preferences > User Settings), override editor.fontFamily like so:

// Place your settings in this file to overwrite the default settings
{
    "editor.fontFamily": "Source Code Pro"
}

You may need to restart VSCode if it was already open when the font was first installed.

Cutaneous

I'll give it one more try to see if it works the second time I do that. Forgot to mention I tried that & it didn't do anything. – Crocidolite