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

Question

I found many questions on the Internet that Firefox does not show local websites (on the server), but none of the solutions worked for me. Open https://nl.hacktisch.com/ in Firefox to see that fonts (Karla font and the icon in the sharing button, top right) are not loading.

Most answers relate to strict origin restrictions in Firefox, but even with the following settings in .htaccess it does not 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 "*" 

In the firefox inspector, you can see that the browser is not even trying to download the font:

This suggests that the css font declaration is incorrect, but I also tried several ways to determine the font in css. Currently:

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

Answer 1

The problem is solved, it was caused by the parameter with the binding , which was in my style tag. Apparently, browsers have different stylesheet implementations that in Firefox cause the font to not load files at all