Firefox: lokalnie hostowany webfont nie jest wyświetlany - nawet z Access-Control-Allow-Origin "*"

Question

Znalazłem wiele pytań online na temat Firefoksa, który nie pokazywał lokalnych webfontów (na serwerze), ale żadne z rozwiązań nie działało dla mnie. Otwórz https://nl.hacktisch.com/ w przeglądarce Firefox, aby zobaczyć, że czcionki (Karla i czcionka ikony w przycisku udostępniania, w prawym górnym rogu) nie ładują się.

Większość odpowiedzi są o ścisłych ograniczeń pochodzenia w Firefoksie, ale nawet z następującymi ustawieniami .htaccess nie działa:

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> 

lub nawet

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

można zobaczyć w inspektora firefox, że przeglądarka nawet nie próbuje załadować czcionki:

Sugeruje to, że deklaracja czcionki css jest błędna, ale wypróbowałem także kilka sposobów definiowania czcionki w css. Obecnie w następujący sposób:

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

i

@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

problem jest rozwiązany, było to spowodowane przez scoped parametr, który miałem na moim tagu arkusza stylów. Wygląda na to, że przeglądarki mają różne implementacje dopasowanych arkuszy stylów, które w Firefoksie spowodowały, że czcionka nie załadowała plików.