Skip to content

Subdomain’den Webkit Font Yükleme Sorunu

Geçenlerde uğraştığım bir projede değişiklik olsun diye webkit font kullanmak istedim. Projeyi sunucuya atıp çalıştırdığım anda problem yaşadım. Halbuki lokalde çok başarılı bir şekilde çalışıyordu.

Fakat sunucuya atıp test ettiğim zaman fontların tam olarak başarılı yüklenmediğini farkettim. Bu problem sadece Mozilla Firefox’da ve tabii ki Internet Explorer’daydı. Diğer tarayıcılarda bir problem yoktu.

Birazcık araştırmadan sonra bunun için gerekli çözümü buldum. Fontları farklı bir domainden yüklemeye çalışıldığı zaman bu problem ortaya çıkıyor ve benim CSS dosyam subdomainden çekiliyordu.

Sebebi Nedir?

Firefox farklı etki alanlarından font yüklenmesinin kötü bir fikir olduğunu düşünüyor. Bu nedenle buna müsade etmiyor. IE için zaten konuşmaya gerek yok. Herşeyi hep geriden takip eder kendisi.

Çözümü Nedir?

Dediğim gibi kısa bir araştırmadan sonra sorunun çözümünü buldum. Bu problemi .htaccess dosyasına 3-5 satırlık bir kod ekleyerek çözüme kavuşturacağız. Aşağıdaki kodu .htaccess dosyanıza ekleyerek bütün domainlerden font yüklemesi yapabilirsiniz:

[text] <filesmatch "\.(ttf|ttc|otf|eot|woff)$"="">
<ifmodule mod_headers.c="">
Header set Access-Control-Allow-Origin "*"
</ifmodule>
</filesmatch>[/text]

Firefox farklı etki alanlarından font yüklenmesinin kötü bir fikir olduğunu düşünüyor

Belirli domainlerden yüklemek isterseniz de aşağıdaki kodu kullanabilirsiniz:

[text] <filesmatch "\.(ttf|ttc|otf|eot|woff)$"="">
<ifmodule mod_headers.c="">
Access-Control-Allow-Origin: http://belirlidomain.com
</ifmodule>
</filesmatch>[/text]

Umarım sorununuzu çözmüştür bu yöntem. Kolay gelsin,

TR Kodlama GitHub'da!

TR Kodlama'da yer alan makaleleri GitHub üzerinden düzenleyebileceğinizi biliyor muyudunuz? Harika değil mi? Bu makale ile ilgili düzenleme yapmak isterseniz aşağıdaki butona tıklayınız!

GitHub'da Görüntüle ve Düzenle!