Tôi tìm thấy rất nhiều câu hỏi trực tuyến về Firefox không hiển thị các webfonts cục bộ (trên máy chủ) nhưng không có giải pháp nào phù hợp với tôi. Mở https://nl.hacktisch.com/ trong Firefox để thấy rằng phông chữ (phông chữ Karla và biểu tượng trong nút chia sẻ, trên cùng bên phải) không tải.Firefox: webfont được lưu trữ cục bộ không hiển thị - ngay cả với Access-Control-Allow-Origin "*"
Hầu hết câu trả lời là về những hạn chế nghiêm ngặt nguồn gốc trong Firefox, nhưng ngay cả với các thiết lập sau trong .htaccess nó không hoạt động:
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>
hoặc thậm chí
Header set Access-Control-Allow-Origin "*"
Bạn có thể nhìn thấy trong trình kiểm tra firefox rằng trình duyệt thậm chí không cố gắng tải phông chữ:
Điều này cho thấy rằng tuyên bố phông chữ CSS là sai nhưng tôi cũng đã thử một số cách xác định phông chữ trong css. Hiện nay như sau:
@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;
}
và
@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;
}