@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. Eğer @font-face kullanırken Türkçe karakter desteği içermeyen bir font kullanırsanız sitenizde bazı hatalar olacaktır. Bu hatanın nasıl giderileceğini bu yazıyı okuyarak yapabilirsiniz.




@font-face Kullanımı
@font-face {
font-family: Myriad Pro;
src: url("fontunyolu");
}
a {font-family: Myriad Pro; }


Normalde @font-face kullanımının en sade hali budur. Ancak bu sadece tek bir fon üzerinde işlem yapmamızı sağlar. Eğer birden çok tarayıcıda bu fontun işlem görmesini istiyorsanız http://www.fontsquirrel.com/fontface/generator’a giderek istediğiniz font’u “Add Fonts” diyerek yüklüyoruz. Çıkan kısımlardan yükleme işleminizi gerçekleştirebilirsiniz. İndirilen dosyalar arasından size gerekli olan dosyalar sadece “.eot”, “.ttf”, “.woff”, “.svg” uzantılı dosyalardır. Bu dosyalar bir klasörüm oluşturup içerisine attıktan sonra, rar dosyasının içerisinde bulunan stylesheet.css dosyasını açarak içerisinde bulunan @font-face kodunu kopyalayınız. Kendi CSS dosyanızı açarak onun içerisine bu kodu yerleştiriniz. Ardından fontu kullanmak için font-family: FontunAdı; yazmanız yeterlidir.





@font-face Türkçe Karakter Sorunu Çözümü

Yukarıda “FontSquireel.com”‘dan font yüklemeyi görmüştük. Orada 3 adet seçenek bulunmakta ve otomatik olarak “Optimal” veya “Basic” seçilidir. Bizim Türkçe Karakter Hatasını gidermek için “EXPERT” seçeneğini seçmemiz gereklidir. Seçtikten sonra gelen özelliklerden “Font Formats“dan SVG’yi işaratledikten sonra, “Subsetting” seçeneğini bularak “Custom Subsetting“‘i seçelim. Gelen ekrandan “Language” Turkish olarak seçtikten sonra “Single Characters:” kısmına “ç,Ç,ş,Ş,ı,İ,ğ,Ğ,ü,Ü,ö,Ö,ü,Ü” Türkçe karakterleri yazarak fontumuzu indirirsek Türkçe karakter hatamız ortadan kalkacaktır.

Ben bu şekilde sorunumu ortadan kaldırdım. Sizlerde bu şekilde deneyerek yapabilirsiniz. Eğer her hangi bir sorun olursa sitemdeki konunun altından yorum olarak bana bildirebilirsiniz.

Kaynak: http://erenkeskin.com/font-face-turkce-karakter-sorunu-cozumu/