Firefox: locally hosted webfont not shown - even with Access-Control-Allow-Origin "*"

Viewed 247

I found a lot of questions online about Firefox not showing local webfonts (on the server) but none of the solutions worked for me. Open https://nl.hacktisch.com/ in Firefox to see that the fonts (Karla and icon font in share button, top right) don't load.

Most answers are about the strict origin restrictions in Firefox, but even with the following settings in .htaccess it doesn't work:

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

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

or even

Header set Access-Control-Allow-Origin "*"

You can see in the firefox inspector that the browser doesn't even try to load the font:

enter image description here

This suggests that the css font declaration is wrong but I have also tried several ways of defining the font in css. Currently as follows:

@font-face {
    font-family: Karla;
    font-weight: 400;
    font-style: normal;
    src: url('/fonts/k.eot');
    src: url('/fonts/k.eot?#iefix') format('embedded-opentype'), local('Karla'), local('k'), url('/fonts/k.woff2') format('woff2'), url('/fonts/k.woff') format('woff'), url('/fonts/k.ttf') format('truetype'), url('/fonts/k.svg#Karla') format('svg')
}
@font-face {
    font-family: Karla;
    font-weight: 700;
    font-style: normal;
    src: url('/fonts/k7.eot');
    src: url('/fonts/k7.eot?#iefix') format('embedded-opentype'), local('Karla Bold'), local('k7'), url('/fonts/k7.woff2') format('woff2'), url('/fonts/k7.woff') format('woff'), url('/fonts/k7.ttf') format('truetype'), url('/fonts/k7.svg#Karla') format('svg')
}
body{
    font-family: Karla, sans-serif;
}

and

@font-face {
    font-family: 'ico';
    src: url('/fonts/ico.eot?35583524');
    src: url('/fonts/ico.eot?35583524#iefix') format('embedded-opentype'),
        url('/fonts/ico.woff?35583524') format('woff'),
        url('/fonts/ico.ttf?35583524') format('truetype'),
        url('/fonts/ico.svg?35583524#ico') format('svg');
    font-weight: normal;
    font-style: normal;
}
1 Answers
Related