title: HTML5, Adding custom fonts
body: <p>I am new at learning HTML5 and CSS. Advanced apology for this very basic question.
  I have downloaded a font and saved it in a folder called fonts in my project. 
  Then created a fonts.css file inside of css folder and put the following code in it.</p>
  
  <pre><code>@font-face {
  font-family: 'FiraCode-Regular';
  font-weight: normal;
  font-style: normal;
  src: url('../fonts/FiraCode-Regular.eot');
  src: url('../fonts/FiraCode-Regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/FiraCode-Regular.woff2') format('woff2'),
       url('../fonts/FiraCode-Regular.woff') format('woff'),
       url('../fonts/FiraCode-Regular.ttf') format('truetype');
  }
  @font-face {
      font-family: 'FireCoda-Light';
      font-weight:normal;
      font-style: normal;
      src: url('../fonts/FireCoda-Light.eot');
      src: url('../fonts/FireCoda-Light.eot?#iefix') format('embedded-opentype'),
           url('../fonts/FireCoda-Light.woff2') format('woff2'),
           url('../fonts/FireCoda-Light.woff') format('woff'),
           url('../fonts/FireCoda-Light.ttf') format('truetype');
  }
  </code></pre>
  
  <p>Then in the main.css file I added the following css:</p>
  
  <pre><code>body{
   font-family:"FiraCode-Regular",Verdana, sans-serif;
   font-size: 1.2rem;
  }
  </code></pre>
  
  <p>here is an screen shot of the file hierarchy in my project
  <a href="https://i.stack.imgur.com/iYYHe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iYYHe.png" alt="enter image description here"></a></p>
  
  <p>now the problem is the font is not working. I would appreciate if anyone can help me here. </p>