font import not working in any browser after uploading the files to the server

Question

Here's the link to what I'm dealing with: http://henrygillis.com/henryslife/

If I live-preview my files from Brackets the proper fonts show up. But after uploading it to my server it does not work (if you check the link above). Is this a problem with font-face? Am I missing something in the code? This has been driving me crazy. Everything else works as intended except for the fonts. I'm thankful for any help!

CSS:

@font-face {
    font-family: 'brandontext-black';
    src: local('BrandonText-Black.otf'), url('../fonts/BrandonText-Black.otf') format('opentype');
    src: local('BrandonText-Black.woff'), url('../fonts/BrandonText-Black.woff') format('woff');
    src: local('BrandonText-Black.ttf'), url('../fonts/BrandonText-Black.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'brandontext-light';
    src: local('BrandonText-Light.otf'), url('../fonts/BrandonText-Light.otf') format('opentype');
     src: local('BrandonText-Light.woff'), url('../fonts/BrandonText-Light.woff') format('woff');
     src: local('BrandonText-Light.ttf'), url('../fonts/BrandonText-Light.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'brandontext-regular';
    src: local('BrandonText-Regular.otf'), url('../fonts/BrandonText-Regular.otf') format('opentype');
    src: local('BrandonText-Regular.woff'), url('../fonts/BrandonText-Regular.woff') format('woff');
    src: local('BrandonText-Regular.ttf'), url('../fonts/BrandonText-Regular.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
body {
    font-family: 'BrandonText-Black', sans-serif;
    font-style: normal;
    position: relative;
    z-index: 0;
    color: white;
    text-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
}

Some HTML:

 <article class="entry" id="entry_19-06-2014">
            <div class="background" style="background-image: url('Images/19-06-2014.jpg')"></div>
            <div class="container">
                <h1>Stealing couches like hob(r)os</h1>
                <h2>then putting them back like good citicens</h2>
                <h3><em>19th</em> of June, 2014 - <em>Meat Packers District</em>, Chicago</h3>
                <div class="seperator">
                    <img src="Design/Seperator_02.svg">
                </div>
                <p>Random projections have recently emerged as a powerful method for dimensionality reduction. Theoretical results indicate not much.</p>
            </div>
        </article>

EDIT:
I changed all the paths to absolute paths as per your suggestion. The fonts are still not loading though. It's just a different error: The GET requests on the font-files simply get canceled.

Answer 1

Usually when this happens it's either the fonts are not correctly uploaded into the server or the relative path is not valid anymore on the server, try to put an absolute path like: src: local('BrandonText-Black.otf'), url('http://www.example.com/fonts/BrandonText-Black.otf') format('opentype');

EDIT
You can look in the "Network" tab of your browser's inspector if there is a 404 error when loading you fonts files.