CSS @ font-face tidak bekerja dengan Firefox, tetapi bekerja dengan Chrome dan IE

Kode berikut berfungsi di Google Chrome beta dan juga IE 7. Namun, Firefox tampaknya memiliki masalah dengan ini. Saya menduga itu menjadi masalah bagaimana file CSS saya dimasukkan, karena saya tahu Firefox tidak terlalu ramah tentang impor lintas domain.

Tapi ini semua hanya HTML statis dan tidak ada pertanyaan tentang cross-domain.

Di halaman arahan saya.html saya melakukan impor CSS seperti:

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

Di dalam main.css saya memiliki impor lain seperti:

@import url("reset.css");
@import url("style.css");
@import url("type.css");

dan dalam type.css saya memiliki deklarasi berikut:

@font-face {
    font-family: "DroidSerif Regular";
        src: url("font/droidserif-regular-webfont.eot");
        src: local("DroidSerif Regular"), 
                url("font/droidserif-regular-webfont.woff") format("woff"), 
                url("font/droidserif-regular-webfont.ttf")     format("truetype"), 
                url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q")     format("svg"); 
    font-weight: normal; font-style: normal; }
@font-face {
    font-family: "DroidSerif Bold";
    src: url("font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), 
        url("font/droidserif-bold-webfont.woff") format("woff"), 
        url("font/droidserif-bold-webfont.ttf") format("truetype"), 
        url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal; font-style: normal; }

body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }

Saya memiliki direktori bernama "font" di lokasi yang sama dengan type.css. Direktori font ini berisi semua file woff / ttf / svg dll.

Saya bingung tentang yang satu ini. Ini bekerja di Chrome dan IE tetapi tidak di Firefox . Bagaimana ini mungkin? Apa yang saya lewatkan?

LOKAL MENJALANKAN SITUS ( file:///)

Firefox memiliki kebijakan "file uri origin" ( file:///) yang sangat ketat : untuk membuatnya berperilaku seperti browser lain, buka about:config, filter dengan, fileuridan alihkan preferensi berikut:

security.fileuri.strict_origin_policy

Setel ke false dan Anda harus dapat memuat sumber daya font lokal di berbagai level jalur.

SITUS DITERBITKAN

Seperti komentar saya di bawah ini, dan Anda mengalami masalah ini setelah menggunakan situs Anda, Anda dapat mencoba menambahkan header tambahan untuk melihat apakah masalah Anda mengonfigurasikan dirinya sebagai masalah lintas domain: seharusnya tidak, karena Anda menentukan jalur relatif, tetapi saya tetap akan mencobanya: di file .htaccess Anda, tentukan Anda ingin mengirim header tambahan untuk setiap file .ttf / .otf / .eot yang diminta:

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Terus terang, saya tidak akan berharap itu membuat perbedaan, tetapi sangat sederhana itu layak untuk dicoba: kalau tidak coba gunakan pengkodean base64 untuk jenis huruf font Anda, jelek tapi mungkin berfungsi juga.

Rekap yang bagus tersedia di sini

Selain menambahkan berikut ini ke .htaccess Anda: (terima kasih @Manuel)

<FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Anda mungkin ingin mencoba menambahkan secara eksplisit tipe webfont mime ke file .htaccess ... seperti ini:

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

Pada akhirnya, file .htaccess saya terlihat seperti ini (untuk bagian yang memungkinkan webfonts bekerja di semua browser)

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

# END REQUIRED FOR WEBFONTS

Saya punya masalah ini juga. Saya menemukan jawabannya di sini: http://www.dynamicdrive.com/forums/showthread.php?t=63628

Ini adalah contoh dari solusi yang bekerja pada firefox, Anda perlu menambahkan baris ini ke font wajah css:

src: local(font name), url("font_name.ttf");

Saya hanya akan meninggalkan ini di sini karena rekan kerja saya menemukan solusi untuk masalah "font-face yang tidak bekerja pada firefox tetapi di tempat lain" masalah.

Masalahnya hanya Firefox yang mengacaukan deklarasi font-family, ini akhirnya memperbaikinya:

body{ font-family:"MyFont" !important; }

PS: Saya juga menggunakan html5boilerplate.

Saya mengalami masalah yang sama. Periksa kode Anda untuk H1, H2 atau gaya apa pun yang Anda targetkan dengan aturan @ font-face. Saya menemukan saya kehilangan koma setelah font-family: 'custom-font-family' Arial, Helvetica etcitu muncul dengan baik di setiap browser selain dari Firefox. Saya menambahkan koma dan berhasil.

Saya memiliki masalah yang persis sama. Saya harus membuat folder baru yang disebut "font" dan meletakkannya di wp_content. Saya dapat mengaksesnya dari browser saya seperti ini http://www.example.com/wp-content/fonts/CANDY.otf

Sebelumnya, folder font berada di direktori yang sama dengan file CSS saya, dan @ font-face tampak seperti ini:

@font-face { 
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}

Seperti yang saya sebutkan di atas, ini tidak berfungsi di Firefox tetapi hanya dengan Chrome. Sekarang ini berfungsi karena saya menggunakan jalur absolut:

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}

Saya punya masalah persis ini menjalankan ff4 di mac. Saya menjalankan server pengembangan lokal dan deklarasi @ font-face saya berfungsi dengan baik. Saya pindah ke live dan FF akan 'mem-flash' jenis yang benar pada halaman pertama, tetapi ketika menavigasi lebih dalam, jenis huruf default ke stylesheet browser.

Saya menemukan solusinya dengan menambahkan deklarasi berikut ke .htaccess

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

ditemukan via

Salah satu solusi mudah yang belum ada yang disebutkan adalah menanamkan font langsung ke file css menggunakan pengkodean base64.

Jika Anda menggunakan fontsquirrel.com, di Generator Kit font-face pilih mode ahli , gulir ke bawah dan pilih Base64 Encode di bawah Pilihan CSS - Font-Kit yang diunduh akan siap untuk plug and play.

Ini juga memiliki manfaat pinggiran mengurangi waktu buka halaman karena memerlukan satu permintaan http kurang.

Saya akan menyebutkan bahwa beberapa font memiliki masalah di firefox jika nama file mereka mengandung karakter tertentu. Saya baru-baru ini mengalami masalah dengan font 'Modulus' yang memiliki nama file '237D7B_0_0'. Menghapus garis bawah pada nama file dan memperbarui css agar sesuai dengan nama file baru menyelesaikan masalah ini. Font lain dengan karakter yang mirip tidak memiliki masalah ini yang sangat aneh ... mungkin bug di firefox. Saya akan merekomendasikan menyimpan nama file hanya untuk karakter alfanumerik.

Untuk font ini khususnya Anda harus menggunakan Google Font API:

http://code.google.com/webfonts/family?family=Droid+Sans

Jika Anda masih ingin menggunakan generator kit FontSquirrel, gunakan opsi peretasan Smiley untuk menghilangkan masalah font lokal. Setelah Anda membuat kit, periksa bahwa demo.html yang dihasilkan berfungsi di FireFox. Aku yakin itu terjadi. Sekarang unggah ke server Anda - saya yakin itu bekerja di sana juga karena FontSquirrel mengagumkan.

Namun, jika Anda memecahkan kode kit yang dihasilkan saat mengintegrasikannya ke dalam proyek Anda, gunakan metode standar debugging - periksa 404 dan mulai baris demi baris sampai Anda menemukan masalah. WOFF pasti bekerja di FF, jadi itu tempat yang bagus untuk memulai.

Akhirnya, jika tidak ada yang berhasil, perbarui FireFox. Saya menulis semua ini dengan asumsi bahwa Anda menggunakan yang terbaru; tetapi Anda tidak menentukan versi apa yang Anda periksa, sehingga itu bisa menjadi masalah Anda juga.

Coba baca pernyataan sumber lokal di @font-facearahan Anda .

Ada bug yang diketahui di Firefox atau Google Font API yang mencegah varian font untuk digunakan jika font diinstal secara lokal, dan cocok dengan nama lokal yang ditentukan:

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

Agar nerf deklarasi lokal secara efektif, buat saja string sumber lokal Anda omong kosong. Konvensi yang berlaku umum untuk ini adalah menggunakan karakter unicode smiley ( "☺"). Mengapa? Paul Irish memiliki penjelasan yang bagus di blognya:

http://paulirish.com/2010/font-face-gotchas/#smiley

Apakah Anda menguji ini dalam file lokal atau dari server Web? File dalam direktori yang berbeda dianggap sebagai domain yang berbeda untuk aturan lintas-domain, jadi jika Anda menguji secara lokal, Anda mungkin mendapatkan batasan lintas-domain.

Kalau tidak, mungkin akan membantu untuk diarahkan ke URL di mana masalah terjadi.

Juga, saya sarankan melihat konsol kesalahan Firefox untuk melihat apakah ada kesalahan sintaksis CSS atau kesalahan lain yang dilaporkan.

Juga, saya perhatikan Anda mungkin ingin font-weight: bold pada aturan @ font-face kedua.

Menggunakan aturan .htaccess Access Control Allow Origin tidak berfungsi untuk saya ketika saya dihadapkan dengan masalah ini.

Sebaliknya, di IIS di web.config masukkan blok system.webServer yang ditunjukkan di bawah ini.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

Ini bekerja seperti pesona bagi saya. Jika Anda perlu membatasi akses ke domain tertentu, ganti * dengan domain.

Saya mengalami masalah yang sama untuk mendapatkan font untuk ditampilkan dengan benar di Firefox. Inilah yang saya temukan bekerja untuk saya. Tambahkan garis miring sebelum direktori menahan font di atribut url. Ini versi saya sebelum dan sesudah:

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

perhatikan garis miring sebelum 'font' di url? Ini memberi tahu browser untuk memulai di direktori root dan kemudian mengakses sumber. Setidaknya bagi saya - Soal Dipecahkan.

Jika Anda mencoba mengimpor font eksternal, Anda menghadapi salah satu masalah paling umum dengan Firefox dan peramban lainnya. Beberapa saat font Anda berfungsi baik di Google Chrome atau salah satu browser lain tetapi tidak di setiap browser.

Ada banyak alasan untuk jenis kesalahan ini. Salah satu alasan terbesar di balik masalah ini adalah font yang ditentukan sebelumnya. Anda perlu menambahkan kata kunci penting setelah akhir setiap baris kode CSS Anda seperti di bawah ini:

Contoh:

@font-face
{
    font-family:"Hacen Saudi Arabia" !important;
    src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
    src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
    src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
    src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
    font-family:"Hacen Saudi Arabia" !important;
}

Deskripsi: Masukkan kode di atas dalam file CSS Anda atau kode di sini. Dalam contoh di atas, ganti "Hacen Arab Saudi" dengan font-family Anda dan ganti url sesuai direktori font Anda.

Jika Anda memasukkan! Penting dalam browser kode css Anda secara otomatis fokus pada bagian ini dan menimpa properti yang sebelumnya digunakan. Untuk lebih jelasnya kunjungi: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

Bisakah Anda memeriksa dengan pembakar jika Anda mendapatkan 404? Saya punya masalah dalam pass dan saya menemukan bahwa ekstensi itu sama tetapi linux file.ttf berbeda dari file.TTF ... dan bekerja dengan semua browser kecuali firefox.

Semoga ini bisa membantu!

Ini adalah masalah dengan bagaimana Anda mengatur jalur font-face Anda. Karena Anda tidak memulai path dengan "/", Firefox akan berusaha mencari font berdasarkan path dari stylesheet. Jadi pada dasarnya, Firefox mencari font Anda di direktori "root / css / font" alih-alih direktori "root / font". Anda dapat dengan mudah memperbaiki ini dengan memindahkan folder font ke folder css, atau menambahkan / ke awal jalur font Anda.

Coba ini:

@font-face {
    font-family: "DroidSerif Regular";
    src: url("/font/droidserif-regular-webfont.eot");
    src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "DroidSerif Bold";
    src: url("/font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: "DroidSerif Regular" , serif;
}
h1 {
    font-weight: bold;
    font-family: "DroidSerif Bold";
}

Coba ini....

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

Saya punya masalah serupa. Halaman demo fontsquirel berfungsi di FF tetapi bukan halaman saya sendiri meskipun semua file berasal dari domain yang sama!

Ternyata saya menautkan stylesheet saya dengan URL absolut (http://example.com/style.css) sehingga FF mengira itu berasal dari domain yang berbeda. Mengubah tautan stylesheet saya href ke /style.css sebagai gantinya memperbaiki hal-hal untuk saya.

Mungkin masalah Anda adalah masalah penamaan, khususnya yang berkaitan dengan penggunaan (atau tidak) spasi dan tanda hubung.

Saya mengalami masalah similair, yang saya pikir telah saya perbaiki dengan menempatkan opsional tanda kutip (') di sekitar font- / family-names, tapi itu sebenarnya secara implisit memperbaiki masalah penamaan.

Saya tidak sepenuhnya mutakhir tentang spesifikasi CSS, dan ada (yang menurut saya) beberapa ambiguitas dalam bagaimana klien yang berbeda menafsirkan spesifikasi. Selain itu, tampaknya juga terkait dengan konvensi penamaan PostScript, tapi tolong perbaiki saya jika saya salah!

Lagi pula seperti yang saya mengerti sekarang, deklarasi Anda menggunakan campuran dari dua rasa yang berbeda.

@font-face {
  font-family: "DroidSerif Regular";

Jika Anda akan mempertimbangkan Droid nama keluarga yang sebenarnya, di mana Sans dan Serif adalah anggota, seperti misalnya anak-anak mereka Sans Regular atau Serif Bold , maka Anda dapat menggunakan spasi di mana saja untuk pengidentifikasi concatinate, ATAU Anda menghapus spasi dan menggunakan CamelCasing untuk nama keluarga, dan tanda hubung untuk sub-pengidentifikasi.

Diterapkan pada deklarasi Anda, akan terlihat seperti ini:

@font-face {
  font-family: "Droid Serif Regular";

ATAU

@font-face {
  font-family: DroidSerif-Regular;

Saya pikir keduanya harus benar-benar legal, baik dengan atau tanpa tanda kutip, tetapi saya telah berhasil dengan berbagai klien. Mungkin, suatu hari, saya punya waktu untuk mencari tahu rincian tentang ini / ini.

Saya menemukan artikel ini membantu dalam memahami beberapa aspek yang terlibat: http://mathiasbynens.be/notes/unquoted-font-family

Artikel ini memiliki beberapa detail lebih lanjut tentang PostScript khusus, dan beberapa tautan ke spesifikasi Adobe PDF: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

Tidak perlu dipusingkan dengan pengaturan hanya menghapus tanda kutip dan spasi dari font-family:

ini

body {font-family: "DroidSerif Regular", serif; }

menjadi ini

body {font-family: DroidSerifRegular, serif; }

Dalam kasus saya, saya sloved masalah dengan memasukkan kode gaya font-face

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

direclty di header di halaman index.html atau php Anda, dalam tag gaya. Bekerja untukku!

Karena itu, ini adalah salah satu hasil Google teratas untuk masalah ini. Saya ingin menambahkan apa yang memecahkan masalah ini untuk saya:

Saya harus menghapus format (opentype) dari src dari font-face, kemudian ia bekerja di Firefox juga. Ini berfungsi dengan baik di Chrome dan Safari sebelumnya.

Mungkin ini bukan karena kode Anda, Ini karena konfigurasi Firefox Anda.

Coba ini dari Tool bar Barat ke Unicode

View > Text Encoding > Unicode

Saya memiliki masalah yang sama dan menyelesaikannya dengan menambahkan meta untuk konten:

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

Ini terjadi di Firefox dan Edge jika Anda memiliki teks Unicode di html Anda.

Saya tidak tahu bagaimana Anda membuat sintaks karena saya neved menggunakan svg dalam deklarasi font, tetapi Font Squirel memiliki alat yang sangat bagus untuk membuat sintaks bukti-font-face hanya dari satu font.

http://www.fontsquirrel.com/fontface/generator

Bisa juga dengan penggunaan URL di jalur tag font-face. Jika Anda menggunakan "http://domain.com" itu tidak berfungsi di Firefox, bagi saya mengubahnya menjadi "http://www.domain.com" berfungsi.

Masalah saya adalah bahwa Windows menamai font 'font.TTF' dan firefox yang diharapkan 'font.ttf' saya melihat bahwa setelah membuka proyek saya di linux, mengganti nama font menjadi nama yang tepat dan semuanya berfungsi