@font-face kullanımı ve türkçe karakter sorunu

İyiden iyiye yazı yazamamaya başladım buraya.. Yazacak konu yok değil, ofiste her yaptığım işte yeni birşeyler yazdığım/bulduğum/kullanılacaklar klasörüme not aldığım onca bilgi var fakat zaman ayırıp buraya yazamıyorum yada tam yazmaya başlarken birazdan diyip unutuveriyorum ve sonuç sıfır yazı oluyor.

Bu sefer gene kısa bir konu seçtim vaktim sınırlı olduğundna ama web projeleri üreten arkadaşların çok kullandığı, ama bazen benim gibi unutup bu sorun nedendi ya dediği bir konuyu, @font-face olayındaki türkçe karakter olayını yazacağım. 🙂

Genelden alırsak, @font-face çok yaygın olarak kullanılan ve siteye giren kişinin sisteminde olmayan fontları kullanmamıza yarayan özelliktir. Genellikle Cufon kullanmak istemeyen kullanıcıların Css‘de başvurduğu yöntemdir ve Cufon’dan daha hızlı olduğu içinde tercih edilme sebebidir.

Kullanımı da Cufon’dan daha kolaydır. Css’de bir kere belirttik mi olay biter.

 

En sade haliyle yukarıdaki gibi bir Css tanımlamasıyla işimizi görebiliriz. Ama bu sade tanımlama her kod parçacığında olduğu gibi tarayıcılar arasında uyumsuzluk yapacaktır.

Bu tarayıcı uyumsuzluğunu gidermek için de “.eot”, “.ttf”, “.woff”, “.svg” gibi uzantıdaki dosyalarımızı da tanımlamamız gerekiyor. Bu uzantıdaki dosyalarınızı da fontsquirrel.com/tools/webfont-generator sayfasından elde edebiliriz. Tabiki bunu da rasgele yapmayacağız, malum bunun türkçe karakter sorunları vb. sorunları var daha, o yüzden bunu da dikkatli yapacağız.

.ttf / .otf yada o anda elimizde bulunan font ne ise onu “Add fonts” butonu yardımıyla siteye yüklüyoruz.
Expert seçeneğini seçiyoruz ve Font-Formats‘tan EOT Lite hariç hepsini işaretliyoruz.
Protection dan WebOnly’yi seçiyoruz.
Subsetting menüsünden Custom Subsetting diyip gelen ekranda Language Turkish olarak seçtikten sonra Single Characters kısmına ç,Ç,ş,Ş,ı,İ,ğ,Ğ,ü,Ü,ö,Ö,ü,Ü karakterlerini yazacağız.
Ve son olarak Agreement menüsündeki “Yes, the fonts I’m uploading are legally eligible for web embedding.” i işaretledikten sonra “Download Your Kit” yazan buton ile dosyamızı indiriyor ve diğer uzantılardaki fontlarımıza sahip oluyoruz.

Bu fontlar ile birlikte aşağıdaki Css örneği ile dilediğimiz fontu web sitemizde kullanabiliriz.

 

Umarım açıklayıcı bir yazı olmuştur..
Hepinize neşeli günler.. 🙂

Yazar: Burak Kaşıkcı

Genel olarak web üzerine yoğunlaşan, gaza gelmek için müzik dinleyen, amatör olarak resim çekmeye çalışan, bir yandan özel bir şirkette çalışıp, diğer yandan da okumaya devam eden sıradan bir ölümlü. He bide buraların sahibi.

“@font-face kullanımı ve türkçe karakter sorunu” için 3 yorum

  1. Teşekkürler bende font türkçe karakter destekli olmasına rağmen neden olmuyor diyodum teşekkürler 🙂

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir