Custom Font not displaying in my webpage - html

Question

I have a particular set fonts that I want to implement on a web application that I am building for my class project. Right now, I have it all hosted on GitHub via GitHub Pages. The index page currently uses 4 CSS files, one for Animate.css, the general CSS file for the whole application, Bootstrap's CSS file, and then another CSS file specifically for it.
On the general web app CSS file, named custom.css, I have the following code:
#CHARSET "ISO-8859-1";
#type-face {
font-family: FuturaStd-HeavyOblique;
src: url('fonts/FUTURASTD-HEAVYOBLIQUE.OTF');
}
#
type-face {
font-family: COUTURE Bold;
src: url('fonts/COUTURE-Bold.ttf');
}
.body {
background-color: black;
color: white;
height: 100%;
}
And here is my index.css file:
body {
background-image: url('../images/flyknit.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
-webkit-background-size: cover;
}
.indexTitle {
font-family: FuturaStd-HeavyOblique;
text-align: center;
}
h1 {
font-size: 500%;
}
.buttonBox {
margin-top: 150px;
text-align: center;
font-family: FuturaStd-HeavyOblique;
}
#bbText {
text-align: center;
}
a {
color: white
}
At first, the fonts were running fine on my computer, because I have them installed. But if I was to run the page through GitHub, the font does not show up. And recently, the font won't even run from my own computer. What did I do wrong? Any help is appreciated.

Answer 1

How about you try this in your fonts.css
#font-face {
font-family: 'FuturaStd-HeavyOblique';
src: url('fonts/FUTURASTD-HEAVYOBLIQUE.OTF');
}
call it back with
font-family: 'FuturaStd-HeavyOblique';
Not sure if quotation marks matter, but I believe #type-face should be #font-face