Custom font via @font-face doesn't work in Firefox

Question

I want to use custom font on a website and I managed (via FontSquirrel) to make it work in Chrome, Safari and even Internet Explorer, but not in Firefox.

This is my code:

@font-face {
font-family: 'RaspoutineClassic';
src: url('http://vukdeveloper.uk.to/klice/font/RaspoutineClassic-webfont.eot');
src: url('http://vukdeveloper.uk.to/klice/font/RaspoutineClassic-webfont.eot?#iefix') format('embedded-opentype'),
     url('http://vukdeveloper.uk.to/klice/font/RaspoutineClassic-webfont.woff2') format('woff2'),
     url('http://vukdeveloper.uk.to/klice/font/RaspoutineClassic-webfont.woff') format('woff'),
     url('http://vukdeveloper.uk.to/klice/font/RaspoutineClassic-webfont.ttf') format('truetype'),
     url('http://vukdeveloper.uk.to/klice/font/RaspoutineClassic-webfont.svg#raspoutine_classicitalic') format('svg');
font-weight: normal;
font-style: normal;}

This is the site: vukdeveloper.uk.to/klice

I've also added this into .htaccess file but no such luck with that either.

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Can you suggest any changes to make this work?

Answer 1

Firefox is requesting

http://vukdeveloper.uk.to/klice/css/font/RaspoutineClassic.otf
http://vukdeveloper.uk.to/klice/css/font/RaspoutineClassic.woff
http://vukdeveloper.uk.to/klice/css/font/RaspoutineClassic.ttf

and is getting a 404 for each.

And the reason it is requesting those is that in http://vukdeveloper.uk.to/klice/css/slicknav.css you have another @font-face declaration for the same font-family name, that gives incorrect paths to the font files:

@font-face {
  font-family: 'RaspoutineClassic';
  src: url('font/RaspoutineClassic.eot?#iefix') format('embedded-opentype'),  url('font/RaspoutineClassic.otf')  format('opentype'),
         url('font/RaspoutineClassic.woff') format('woff'), url('font/RaspoutineClassic.ttf')  format('truetype'), url('font/RaspoutineClassic.svg#RaspoutineClassic') format('svg');
  font-weight: normal;
  font-style: normal;
}