Font-face not working at all - css

Question

I've read a lot of posts and make my font-face code same as in other answers and it's still not working...
#font-face {
font-family: 'KlavikaLT';
src: url('Klavika-Light.otf') format('opentype');
}
#font-face {
font-family: 'KlavikaLTit';
src: url('Klavika-LightItalic.otf') format('opentype');
}
#font-face {
font-family: 'KlavikaBD';
src: url('Klavika-Bold.otf') format('opentype');
}
#font-face {
font-family: 'KlavikaBDit';
src: url('Klavika-BoldItalic.otf') format('opentype');
}
#font-face {
font-family: 'KlavikaRG';
src: url('Klavika-Regular.otf') format('opentype');
}
.footerleft
{
font-family: KlavikaLT;
}
.footerright
{
font-family: KlavikaBDit;
}
This is my example code that I use. Fonts are in the same folder as stylesheet file. Where do I make a mistake?
EDIT 1
It's funny because it's working on my localhost and all paths are correct. Not working on my server, but I made the same as in my code on other my site and it's working there...

Answer 1

Use this syntax:
<style>
#font-face {
font-family: 'KlavikaLT';
src: url('KlavikaLT.eot');
src: url('KlavikaLT.eot?#iefix') format('embedded-opentype'),
url('KlavikaLT.woff') format('woff'),
url('KlavikaLT.ttf') format('truetype'),
url('KlavikaLT.svg#KlavikaLT') format('svg');
font-weight: normal;
font-style: normal;
}
body { font-family: "KlavikaLT", serif; }
</style>
Make sure the file paths are correct.
This is the specification for #font-face:
#font-face {
[font-family: <family-name>;]?
[src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
[unicode-range: <urange>#;]?
[font-variant: <font-variant>;]?
[font-feature-settings: normal|<feature-tag-value>#;]?
[font-stretch: <font-stretch>;]?
[font-weight: <weight>];
[font-style: <style>];
}

Answer 2

'KlavikaLT' is not a standard font like Courier for example. Your browser has no idea what that font is unless you tell it.
You can tell the browser about your font in a couple of ways:
Post the import at the top of your css:
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
Import with HTML, above your CSS:
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Or using JavaScript:
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Open+Sans::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
Examples copied from Google Fonts.
If you're using a custom font hosted on your own server, you can use the above syntax, but replace the urls with your own. Each one should contain the #font-face, which looks like this:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
}

Answer 3

Just added more extensions of font, like .ttf and .woff. Now it's working perfectly, but don't know why .otf doesn't work at all. Cheers!
#font-face
{
font-family: KlavikaLT;
src: url('fonts/KlavikaLT.otf') format('opentype'),
url('fonts/KlavikaLT.ttf') format('truetype'),
url('fonts/KlavikaLT.woff') format('woff');
}