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 different fonts to match the fonts being used on the project I need to complete.

I looked at this post on stackoverflow already but after doing what the answer says, 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": How to use custom font in visual studio code

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;
}

Thank you for your time.

回答1:

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.

来源：https://stackoverflow.com/questions/40982845/how-do-i-add-a-new-font-of-my-choice-into-visual-studio-code

标签

html

css

fonts

visual-studio-code

font-family