title: CSS @font-face not working?
body: <p>In my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;head&gt;
  
      &lt;link type="text/css" rel="stylesheet" href="add_ons/style_sheets/style.css" /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="header"&gt;
          &lt;p id ="text" &gt;BALL&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;body&gt;
  </code></pre>
  
  <p></p>
  
  <p>In the css I've tried:</p>
  
  <pre><code>@font-face {
  font-family: 'Pier';
  src: url('add_ons/sources/fonts/Pier.woff2') format('woff2');
  src: url('add_ons/sources/fonts/Pier.woff') format('woff');
  src: url('add_ons/sources/fonts/Pier.ttf') format('truetype');
  }
  
  #text{
  
      font-family: 'Pier';
  
  }
  </code></pre>
  
  <p>And it did not work, I've also tried to remove the  <code>format('truetype')</code> part and to use <code>src: url('Path'), url('Path'), url('Path')</code> but that has not worked either.</p>
  
  <p>Can somebody explain me how to properly insert my custom font into a webpage?</p>
  
  <p>P.S.: My webpage isn't currently on any server I'm just opening the html file from my computer on chrome 47.0, could that be the cause?</p>