CODEWITHSUNDEEP
css.htaccessfirefoxfont-facewebfonts
Hacktisch
Hacktisch

Reputation: 1514

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

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

Upvotes: 7

Views: 272

Answers (1)

Hacktisch
Hacktisch

Reputation: 1514

The problem is solved, it was caused by the scoped parameter that I had on my stylesheet tag. Apparently browsers have different implementations of scoped stylesheets which in Firefox caused the font face to not load the files at all

Upvotes: 7

Related Questions