CSS @font-face not working?

In my HTML:

<!DOCTYPE html>

<head>

    <link type="text/css" rel="stylesheet" href="add_ons/style_sheets/style.css" />

</head>

<body>

    <div id="header">
        <p id ="text" >BALL</p>
    </div>

<body>

In the css I've tried:

@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';

}

And it did not work, I've also tried to remove the format('truetype') part and to use src: url('Path'), url('Path'), url('Path') but that has not worked either.

Can somebody explain me how to properly insert my custom font into a webpage?

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?

Solution

Best practices is to always use a relative paths not absolute ones, to ensure it works for any domain.

From your code, I'm assuming you are having the following structure:

Root
- index.html
- add_ons
  - style_sheets
    - style.css
  - sources
    - fonts
      - Pier.woff2
      - Pier.woff
      - Pier.ttf

You could simply update your paths in the CSS from:

@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');
}

To:

@font-face {
   font-family: 'Pier';
   src: url('../sources/fonts/Pier.woff2') format('woff2');
   src: url('../sources/fonts/Pier.woff') format('woff');
   src: url('../sources/fonts/Pier.ttf') format('truetype');
 }