title: How do I add a new font of my choice into Visual Studio code?
body: <p>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.</p>
  <p>I've tried the suggestions on <a href="https://stackoverflow.com/questions/31614605/how-to-use-custom-font-in-visual-studio-code">this post</a> already but I still cannot see the fonts I selected and I cannot use them after going into &quot;file &gt; preferences &gt; user settings&quot; and overriding <strong>&quot;editor.font-family&quot;</strong>:</p>
  <p>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.</p>
  <ul>
  <li>titilliumtext14l-600wt.otf</li>
  <li>OpenSans-Semibold.ttf</li>
  <li>OpenSans-Regular.ttf</li>
  <li>Myriad-Pro_31655.ttf</li>
  </ul>
  <p>Here are the &quot;Default Settings&quot;</p>
  <p>// Overwrite settings by placing them into your settings file.
  // See <a href="http://go.microsoft.com/fwlink/?LinkId=808995" rel="nofollow noreferrer">http://go.microsoft.com/fwlink/?LinkId=808995</a> for the most commonly used settings.
  {</p>
  <p>// Editor</p>
  <pre><code>// Controls the font family.
  &quot;editor.fontFamily&quot;: &quot;Consolas, 'Courier New', monospace&quot;,
  
  // Controls the font weight.
  &quot;editor.fontWeight&quot;: &quot;normal&quot;,
  
  // Controls the font size in pixels.
  &quot;editor.fontSize&quot;: 14,
  </code></pre>
  <p>I'm not sure if it is necessary to include what I have in my &quot;main.css&quot; but here it is just in case.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/** 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;
  }</code></pre>
  </div>
  </div>
  </p>