Adding custom fonts in CSS

Question

I am just starting out with HTML, CSS and co. and for the last hour or so I've tried implementing a custom font to my project. I've tried everything, creating a fonts folder or putting the font files in the same directory as my index.html file, but nothing is working!

I am grateful for every help, solving this problem! :)

my directory and css code below

    font-family: league_spartanregular;
    src: url('leaguespartan-bold-webfont.eot');
    src: url('leaguespartan-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('leaguespartan-bold-webfont.woff2') format('woff2'),
         url('leaguespartan-bold-webfont.ttf') format('truetype'),
         url('leaguespartan-bold-webfont.svg#league_spartanregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{
    background-color: #f4f4f4
}

#main-header{

text-align: center;
font-family: league_spartanregular;
font-size: 80px;
}

p{
    font-family: league_spartanregular;
}

Answer 1

Keep fonts in /fonts folder, this will help with clean structure of site down the line. Remember - everything what's in the file is relative to that file - meaning, if you'd put these fonts in /css folder - it would work.

If you want to go back in folder structure just use ../. It's useful if you want to store images for example in /img and not in /css/img.

@font-face{
    font-family: league_spartanregular;
    src: url('../fonts/leaguespartan-bold-webfont.eot');
    src: url('../fonts/leaguespartan-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/leaguespartan-bold-webfont.woff2') format('woff2'),
         url('../fonts/leaguespartan-bold-webfont.ttf') format('truetype'),
         url('../fonts/leaguespartan-bold-webfont.svg#league_spartanregular') format('svg');
    font-weight: normal;
    font-style: normal;
}