Font-face not working at all

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...

Check the network tab in your browser dev tools to see if there is an error loading the files. — CodingWithSpike, Oct 06 '15 at 15:55
try to add ttf, svg, eot, woff and woff2 files. Stay not by one type. it your brouwer don't support it, you have problems. — H. Pauwelyn, Oct 06 '15 at 15:58
There is a network tab error (404) for loading the font, but I checked path and it's correct... Don't know why it's not working... — Ashiv3r, Oct 06 '15 at 17:25

I wrestled a bear once. · Answer 1 · 2015-10-06T16:05:07.163

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

If the font is a custom font (non-Google), then your answer does not apply. — Ciprian, Oct 06 '15 at 16:02
sure it does, just just have to write your own import files. I've included that part in my answer. — I wrestled a bear once., Oct 06 '15 at 16:05
You have only added one format - `woff` - but the OP might be using an older browser and he/she needs to specify all compatible formats. See my answer. — Ciprian, Oct 06 '15 at 16:11
woff is supported on everything except ie8 so there really isn't much reason to justify including anything else. besides, why load all that extra stuff unnecessarily.. but if he needs more than that he can refer to your answer to see how it's done. — I wrestled a bear once., Oct 06 '15 at 16:14

score 2 · Answer 2 · answered Oct 06 '15 at 16:01

2

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

answered Oct 06 '15 at 16:01

Ciprian

872
1
10
30

1

You really should include `local('KlavikaLT'),` at the begining of the `src` so you're not reloading the file again if the stylesheet is used on a page where the font already exists. – I wrestled a bear once. Oct 06 '15 at 16:18
Do you have any reference link for the `local()` declaration? I have never heard of it and I might benefit from it. – Ciprian Oct 06 '15 at 16:24
1

All it does is check the local system for the font before downloading it new. I couldn't find any actual documentation for it, but here's a couple links that might help: http://readableweb.com/mo-bulletproofer-font-face-css-syntax/, http://stackoverflow.com/questions/3698319/css-font-face-what-does-src-local-mean – I wrestled a bear once. Oct 06 '15 at 16:45
Got it. I'll test it myself later. – Ciprian Oct 07 '15 at 08:03

score 1 · Accepted Answer · answered Oct 08 '15 at 16:52

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

Font-face not working at all

3 Answers3