CSS @font-face not working?
<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>