title: How to make fonts loads correctly
body: <p>I have a problem with importing fonts into my app. I tried this but this is not working idk why this is not working or something gone wrong.</p>
  
  <p>Here is my scss file:</p>
  
  <pre><code>@font-face {
    font-family: "OpenSansBold";
    font-style: normal;
    font-weight: 800;
  
    src: url("../../webfonts/opensans/OpenSans-ExtraBold.eot");
    src: url("../../webfonts/opensans/OpenSans-ExtraBold.eot?#iefix") format("embedded-opentype"),
    url("../../webfonts/opensans/OpenSans-ExtraBold.woff2") format("woff2"),
    url("../../webfonts/opensans/OpenSans-ExtraBold.woff") format("woff"),
    url("../../webfonts/opensans/OpenSans-ExtraBold.svg#OpenSansExtrabold") format("svg");
  }
  </code></pre>
  
  <p>And here is my file structure:</p>
  
  <p><a href="https://i.stack.imgur.com/SdB6C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SdB6C.png" alt="enter image description here"></a></p>
  
  <p>And console gives me below:</p>
  
  <pre><code>Failed to decode downloaded font: http://localhost/webfonts/opensans/OpenSans-ExtraBold.woff2
  (index):1 OTS parsing error: invalid version tag
  (index):1 Failed to decode downloaded font: http://localhost/webfonts/opensans/OpenSans-ExtraBold.woff
  (index):1 OTS parsing error: invalid version tag
  </code></pre>
  
  <p>What did i do wrong ? </p>