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

first go to google.fonts select one fonts,there you finds two things one is link in tag which you put in tag of your html file and second thing is font-family of CSS which you use in your css file here is google font links

Answer 2

If this css is from a .css file in the css/ folder, you'll need to add ../ to your filepaths, eg:

@font-face {
    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;
}

Otherwise, if you open the inspector in your browser, you should able to see the errors associated with it trying (and failing) to find these files with red 404 messages.

Answer 3

Check out Google Fonts! :) simply search for your font and upon clicking one, there will be a tab at the bottom. Click on that and there will be a link which you can include in your HTML above your stylesheet link. https://fonts.google.com/

I'm also somewhat new here so apologies if my answer isn't satisfactory. Cheers :)

Answer 4

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;
}