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

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;
}
htmlcssfontsvisual-studio-codefont-family


Solution 1:[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";

Solution 2:[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 z0nxaj
Solution 2 Mike

Related Questions