title: Getting Error on Importing Custom Fonts using SASS
body: <p>I am using Sass for my project and I am getting this error on my home page while importing fonts from my custom fonts folder of Merriweather.The problem is that when i check the network tab on chrome it shows that Agenda font file is included but not the merriweather font file.Both Agenda and Merriweather fonts are in separate folders.</p>
  <p><strong>Error :</strong></p>
  <p><strong><code>**http://localhost/project-name/fonts/Merriweather/Merriweather-Italic.tff net::ERR_ABORTED 404 (Not Found)**</code></strong></p>
  <p><strong>My Project folder structure in like this:</strong></p>
  <ul>
  <li><p>project-folder/fonts-folder/Merriweather-folder/All fonts of Merriweather here</p>
  </li>
  <li><p>project-folder/fonts-folder/Agenda-folder/All fonts of Agenda here</p>
  </li>
  <li><p>project-folder/scss-folder/partials-folder/global.scss</p>
  </li>
  <li><p>project-folder/scss-folder/variables.scss</p>
  </li>
  </ul>
  <p><strong>QUESTIONS:</strong></p>
  <ul>
  <li><p>I want to know the is my syntax right for importing multiple fonts
  from the same font family like Merriweather ?</p>
  </li>
  <li><p>what exactly i am doing wrong in variables.scss ??</p>
  <p>Please help me to resolve this issue.</p>
  </li>
  </ul>
  <p><strong>Code in Variables.scss</strong></p>
  <pre><code>   @font-face {
      font-family: Agenda;
      font-weight: 500;
      font-style: normal;
      src: url(&quot;../fonts/Agenda/Agenda-Medium.otf&quot;) format(&quot;opentype&quot;);
  }
  
  @font-face {
      font-family: Merriweather-Italic;
      font-weight: normal;
      font-style: italic;
      src: url(&quot;../fonts/Merriweather/Merriweather-Italic.tff&quot;) format(&quot;truetype&quot;);
  }
  
  
  @font-face {
      font-family: Merriweather-Regular;
      font-weight: normal;
      font-style: normal;
      src: url(&quot;../fonts/Merriweather/Merriweather-Regular.tff&quot;) format(&quot;truetype&quot;);
  }
  </code></pre>
  <p><strong>This is how i am using fonts in globals.scss</strong></p>
  <pre><code>@import &quot;../variables&quot;;
  
  body{
  
      font-family: Merriweather-Regular;
      font-size: 22px;
      background-color: $white;
  
  }
  
  h1{
      font-family: Merriweather-Italic;
      font-style: italic;
      font-size: 94px;
  }
  
  h2{
      font-family: Merriweather-Regular,Merriweather-Italic;
      font-size: 42px;
  }
  
  h3{
      font-family: Agenda;
      font-size: 30px;
  }
  
  h4{
      font-family: Merriweather-Regular;
      font-style: bold;
      font-size: 27px;
  }
  
  h5{
      font-family: Merriweather-Regular;
      font-size: 26px;
      
  
  }
  </code></pre>