@fontface Nedir ? : İnternet üzerinde girdiğimiz siteler genellikle yazı fontunu bilgisayarınızdan kullanmaktadır. Peki site tasarımcısı herkesin sisteminde olmayan kendi fontu kullanmak isterse durumlar nasıl olur? Bunun en kolay yolu ya Cufon’dur yada @fontface’dir.

@font-face destekleyen Tarayıcılar : Bir çok tarayıcı artık fontface destekliyor.

@font-face nasıl kullanılır : İlk önce kullanıcağımız fontu belirlememiz gerekli ve belirlediğimiz fontu @font-face’e çevirmemiz gerekicek. @font-face yapmak için 3 site bulunmaktadır.

Çevirme için Fontsquirrel sitesini açıyoruz. Belirlediğimiz fontu ‘Add Fonts’ butonunu tıklayarak açıyoruz.

Fontumuzu Seçtikten sonra ‘Yes, the fonts I’m uploading are legally eligible for web embedding.’ yazısına tik’imizi koyuyoruz ve ‘Download Your Kit’ Butonunu aktifleştiriyoruz. Aktifleşen butonu tıklayarak fontumuzun @font-face’e çevrilmiş halini indiriyoruz.

Yukarıdaki klasörden kullancaklarım “ataturk-webfont.eot” , “ataturk-webfont.svg” , “ataturk-webfont.ttf” , “ataturk-webfont.woff” ve “stylesheet.css” dosyalarıdır. Geri kalan diğer dosyalar işime yaramayacağı için temizledim. İndirdiğimiz dosya içerisinde CSS içine aktarmamız gereken @font-face kodları stylesheet.css dosyasında mevcut.  Css kodlarım aşağıdaki gibidir.

@font-face {
    font-family: 'atatrkregular';
    src: url('ataturk-webfont.eot');
    src: url('ataturk-webfont.eot?#iefix') format('embedded-opentype'),
         url('ataturk-webfont.woff') format('woff'),
         url('ataturk-webfont.ttf') format('truetype'),
         url('ataturk-webfont.svg#atatrkregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Tüm yapacağımız işlem bu kadar

@font-face Türkçe karakter sorunu nasıl çözülür? : Yukarıda ‘Fontsquirrel‘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.