Ho trovato molte domande online su Firefox che non mostrava webfonts locali (sul server) ma nessuna delle soluzioni ha funzionato per me. Apri https://nl.hacktisch.com/ in Firefox per vedere che i caratteri (Karla e il carattere dell'icona nel pulsante di condivisione, in alto a destra) non vengono caricati.Firefox: webfont ospitato localmente non mostrato - anche con Access-Control-Allow-Origin "*"
La maggior parte delle risposte sono circa le severe restrizioni di origine in Firefox, ma anche con le seguenti impostazioni in .htaccess non funziona:
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>
o anche
Header set Access-Control-Allow-Origin "*"
Si può vedere a l'ispettore firefox che il browser non tenta nemmeno di caricare il carattere:
Questo suggerisce che la dichiarazione del font css è errata, ma ho anche provato diversi modi di definire il font in css. Attualmente come segue:
@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;
}
e
@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;
}