Adding custom fonts in CSS - html

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

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 2

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

Answer 3

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 4

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