@font-face Pada Mozilla FireFox - Hari ini saya mencoba menggunakan Elusive Icon, semuanya berjalan lancar. Akan tetapi saya menemukan kendala icon tidak muncul pada peramban Mozilla FireFox.

Setelah mecari tau, ternyata secara default FireFox tidak mengizinkan cross-domain untuk font. Artinya, CSS yang menggunakan @font-face tidak akan berjalan pada browser Mozilla FireFox, apabila link font ada pada web lain. Kecuali sobat memakai custom fonts dengan Google Web Fonts.

Firefox hanya menjalankan @font-face dengan kode seperti ini :

@font-face {
  font-family:'Nama Font';
  src:url('files/namafont.woff') format('woff');
  font-style:normal;
  font-weight:normal;
}

Itu artinya font hanya akan berjalan pada domain tertentu saja (dengan menggunakan hosting sendiri), sendangkan bagi pengguna blogspot, hal itu tidak mungkin dilakukan. Biasanya kita akan embed font dengan kode seperti ini :

@font-face {
  font-family:'Nama Font';
  src:url('http://namadomain.com/files/namafont.woff') format('woff');
  font-style:normal;
  font-weight:normal;
}

Dengan kode di atas, maka font tidak akan berjalan pada browser FireFox.

Solusi

Supaya font bisa berjalan di Firefox, maka sobat tambahkan pada .htaccess pada hosting penyimpanan font sobat.

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

Apabila webserver sobat menggunakan ngix maka tambahkan juga kode ini pada virtual host file

location ~* \.(eot|otf|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}

Penyimpanan font hanya bisa dilakukan pada hosting sendiri, tidak bisa dilakukan di blogspot. Bagi sobat yang tidak punya hosting, sebagai alternatif link font bisa diconvert ke base64. Akan tetapi, dengan menggunakan base64 tidak valid CSS3.

67 komentar

kebetulan kang, saya sedang mencoba Elusivi Icon tapi belum fix nih :)

Balas

yeee pertamax premium solar minyak wangi :D

Balas

Wios kirang ngartos kana hos-hosan yang penting pertamax amankeun heula heheheh :D

Balas

Ketigaxxx -_-..

gk dapet deh Pertamaxnya :(

Balas

Hahahaha eleh set yeuuhhh..... :D

Balas

Teu ngartos nu kieu mah kang, jero teuing he... :)

Balas

Pertamaxnya sudah ada yang ngambil :)

Balas

silahkan di fix-an sob :)

Balas

Maaf Ketigaxxx nya juga udah di ambil Kang Adhy

Balas

tadi ada sisa 2 liter udah abisss :)

Balas

Kang saya menggunakan font-face seperti ini pada button blog saya :
.button.link:before {content:"\e052"}
.button.demo:before {content:"\e09d"}
.button.demo:before, .button.link:before{font-family:'Elusive-Icons';font-weight:normal;font-style:normal;vertical-align:middle;margin:0 8px 0 -6px;font-size:16px;color:#3E6C90;text-shadow:0 1px 0 rgba(255,255,255,.1)}



Namun sepertinya tidak ada font-face pada button blog saya.
maaf sebelumnya saya naro link -> contoh: http://fajriandaviar.blogspot.com/2013/10/template-premium-sevida-v-12-free-gratis.html

Balas

cuma beberapa detik aja bedanya kang :) nyuruput kopi sigana, jadi eleh set :)

Balas

urug deui we jero teuing mah kang :)

Balas

karena ga ada @font-face button demo sama downloadnya kotak2 gitu :)

Balas

Siga motoGP wae kang itungan na sepersekian detik...
Hanjakal culang cileung hela ek coment teh jadi we telat!

Balas

Muhun kang, siga :

http://4.bp.blogspot.com/-KPaQNcGNqxs/UmgCLJVZM8I/AAAAAAAADoc/iGdNBU7k854/s1600/untitled.JPG

Balas

pan sanes kang heri teh sembalap sembandung sraya? :D

Balas

solusi itu maksud penjelasan saya di atas teh :D

Balas

Jadi, solusinya gimana ni mengenai CSSnya Kang?

Balas

Enjing deui we kang ah,,, bade mempertutup kelopak mata heula. Tos 5 watt.

Balas

download di sini :
http://shoestrap.org/downloads/elusive-icons-webfont/
trus upload ulang

Balas

Font-face ini gk mendukung di Mozilla Firefox ya Kang ?

Balas

kan udah ada solusinya.. coba baca lagi ke atas

Balas

Yah, gk bisa digunakan dalam Blogspot :(, pantas dari tadi saya masih bingung dengan tutorialnya :D

Balas

hahaha mantaf jd nambah nih elmu na
hehehe untung masi puna hostingan test akh :d
duh telat pisan abi komen :d

Balas

sabandung raya atuh ah hehe ...
telat ge yang penting nyong hadir hehe

Balas

Ohh, gitu ya kang? Kurang ngerti tapi disimak saja :D

Balas

ada juga tutorial yang aneh seperti ini.. apa yang keunggulannya kang, tapi saya kan masih blogspot hahahah :)

Balas

abdi ge gaduh nu gratisan :)

Balas

keunggulannya blog menggunakan font unik :)

Balas

kebetulan ane sedang cari triks ini mas. memang susah chrome dgn mozilla

Balas

berkunjung :) thanks buat tipsnya Kang :) salam Blogger INDONESIA

Balas

hadeeuh kang sami nu gratisan :v
eta ngaruh teu nyak hosting speed kana speed na di mozilla ngaload kana web rada benten kang hehehe

Balas

pami hostingna nuju down otomatis lambat kang

Balas

Kang minta tutorial cara membuat notifikasi kayak blog Akang :) please !! :)

Balas

OOT nih .. ko hash di mozilla gak kayak di chorme y ..landing'y gak pas kang

Balas

wah ada artikel baru nih :D [ saya kelewatan 38 komentar orang :) ]
absen dulu kang ismet :-d

Balas

saya mau izin nyimak artikelnya dulu kang :-d
- salam damai -

Balas

kebetulan sy jadi pengen coba jg

Balas

Berarti cuma htaccess-nya aja yang di modif ya, mas?

Balas

baru denger ada Elusive Icon :3

bedanya sama font awesome apa kang ?

Balas

keren ksng tutornya nambah ilmu lagi :D

Balas

oh jadi itu masalahnya ya kang, malahan saya baru tahu. ternyata berpengaruh juga. makasih kang infona.

Balas

Saya senang membaca artikel kang ismet kalo buka blog kang ismet gak cuman baca satu artikel saja. tutorial-tutorialnya juga keren-keren dan bisa dipahami. terimakasih kang.. :)

Balas

syukur deh mba kalau bermanfaat :)

Balas

iya sob.. awalnya saya juga bingung.. makanya saya share solusinya

Balas

biasanya solusinya banyak di stsckoveflow kang:)

Balas

betul sob hanya file htaccess-nya aja kecuali pake ngix

Balas

banyak icon yang berbeda, karena penyedianya juga berbeda :)

Balas

sip kang sekarang sesuai .. !!

Balas

pantes ateuh kang xixixiixi nuhun akh :d

Balas

laen kali nnt guwe lambung loh RIO.. hati-hati aja.. guwe mau bookmark dulu blog kangismet... :D

Balas

Wah saya belum tau cara ini Kang, kalau untuk blogspot
Penanggulangan untuk solusi dan memasang gimana Kang Ismet

Balas

sayacoba dulu kang mudah-mudahan berkah..

Balas

Mas, saya punya tips jitu mendapatkan Backlink - http://mafiasitez.blogspot.com/2013/10/cara-mendapatkan-backlink-dari-blog-lain.html .. Menurut mas gimana?

Balas

Malahan baru tahu ada istilah font face juga ini

Balas

kang pengen nih ane template nya keren bagnet kang

Balas

klu form komentar ga tampil normal solusinya gimana ya kang..di Opera dan chrome OK2 aja tuh,,,samsury-sites.blogspot.com

Balas

ini terlihat saat blog saya diakses pake firefox

Balas

bener mas tidak stabil saya sudah cek ..

Balas

ini hosting di google drive bisa gak yaa ? @@

Balas

wah kalo ga punya hosting gimana om? bisal di google code nyimpen nya? font custom saya jg ga muncul nih

Balas

tadi nyoba convert ke base64 terus ane test ternyata valid html5 gan ^_^

Balas

Poskan Komentar


×
Chat