CSS Local Font Not Showing Up

I am at that point where I don't know anymore what I should have coded wrong. For test purposes I want to use a local font for my website. But I don't get it to be displayed on all

Solution 1:

Your example seems to be missing @font-face

See an example of it here: https://css-tricks.com/snippets/css/using-font-face/

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Also as mentioned, check the path is correct. The path is relative to the CSS file itself.

Solution 2:

Defining a fallback option in the font-family with the !important tag caused this error. I've removed the fallback and here's the final working code:

@font-face {
        font-family: 'CircularStdBook';
    src: url('CircularStd-Book.eot');
    src: url('../font/CircularStd-Book.eot?#iefix') format('embedded-opentype'),
         url('../font/CircularStd-Book.woff') format('woff'),
         url('../font/CircularStd-Book.ttf') format('truetype'),
         url('../font/CircularStd-Book.svg#CircularStd-Book') format('svg');    
}

body{
    overflow-x:hidden;
    font-family: 'CircularStdBook', Arial, sans-serif;
    }

Thank's for your help.