Font-Face Kullanımı ve Türkçe Karakter Sorunu Çözümü

Bu yazımda web tasarımı ve web projeleri ile uğaşan arkadaşların kullandığı @font face kullanımı ve @font face olayındaki türkçe sorunundan bahsedeceğim. 


Öncelikle @font face nedir?

İnternet üzerinden girdiğimiz siteler yazı fontunu bilgisayarımızda yüklü fontları kullanarak gösterirler.

Sistemimizde yüklü olamayan fontlarla yapılmış siteleri ise font-face veya cufon özelliğni kullanarak bilgisayarımızda gösterebiliriz. Böylece; sistemde yüklü olmayan fontlar font-face ve cufon özelliği ile ziyaretçinin bilgisayarına (cache özelliği)  indirilip kullanma imkanına kavuşmuş olur. 

Kısacası font-face; siteye giren kişinin sisteminde olmayan fontları kullanmasına imkan veren bir sistemdir. Cufon kullanmak istemeyen tasarımcıların Css de uyguladığı  ve Cufon dan daha hızlı olduğu için tercih ettiği bir yöntemdir. 


@Font Face Yazı Tipi Çeşitleri:

@Font-face kodu ile sitelerimize ekleyeceğimiz yazı tipi tarayıcılara göre çeşitlilik arzetmektedir.

• eot uzantılı yazı tipleri
• svg uzantılı yazı tipleri
• ttf veya otf uzantılı yazı tipleri
• woff uzantılı yazı tipler

@font-face kullanımında farklı tarayıcılar farklı yazı tipi dosya uzantılarını desteklediği için birden fazla yazı tipi dosyası hazırlamamız gerekmektedir. İnternet Explorer .eot uzantılı yazı tiplerini desteklerken, diğer tarayıcılar. ttf ve .otf uzantılı yazı tiplerini desteklemektedir. Opera ve Google Chrome svg uzantılı yazı tiplerini desteklemektedir.

Dolayısı ile tasarımlarımızda kullanacağımız bir font için tüm tarayıcılarda görüntülenmesi için aynı fontun yukarıda ki (.eot, .svg, ttf, woff) 4 farklı formatını edinmemiz gerekiyor.

Yazı Tipi Dosyalarını Birbirine Çeviren Araçlar:

Kullanacağımız yazı tipi dosyasının tarayıcılar arasındaki uyumsuzluğunu gidermek için fontumuzu (.eot, .ttf, .woff, .svg) uzantıda ki dosyalarımıza yani @font face çevirmemiz gerekiyor.

Yazı tip dosyalarını birbirine çevirme araçları:

1. ttf yazı tipinizi font-face’in desteklediğin tüm yazı tiplerini (.eot, .svg, ttf, woff)    http://www.fontsquirrel.com/fontface/generator
2. Farklı yazı tiplerini birbirine çeviren araç: http://onlinefontconverter.com/
3. ttf    yazı tiplerini eot’ya çevirmek için : http://www.kirsle.net/wizards/ttf2eot.cgi
4. ttf’den eot ye çevirmek için başka bir araç:http://ttf2eot.sebastiankippe.com/
5. Google nin google webfonts'u: https://www.google.com/fonts

Burada fontumuzu font face yapmamız yetmiyor, fontunuzun türkçe karakter sorununu da çözmemiz gerekiyor. Bunun için bize türkçe karakter desteğini de veren http://www.fontsquirrel.com/fontface/generator sitesini kullanacağız.

Tasarımımızda kullanacağımız fontu  font face yapmak için; 

1. http://www.fontsquirrel.com/fontface/generator adresine gidiyoruz ve kırmızı çerçeve ile işaretli Upload Font'a tıkıyoruz. 
2. Fontumuzu upload ediyoruz. 
3. Türkçe karakter hatasını gidermek için Expert'i seçiyoruz.
4. Altındaki svg'ye tik koyuyoruz. 
5. Custom Subsetting'i seçiyoruz.
6. Ardından dil olarak Turkihs'i işaretliyoruz.
7. Single Characters kısmına türkçe karekterlerimizi girersek türkçe karekter sorunumuz ortadan kalkacaktır.
8. Kırmızı ile yazılı "Yes, the fonts I'm uploading are legally eligible for web embedding." yazısına tikimizi koyuyoruz. (Lisans gerektiren bir font varsa servis bunu çevirmiyor)
9. Download Your Kit butonuna basıyoruz.

Böylece dosyamızı indiriyor ve diğer uzantılardaki fontlarımıza sahip oluyoruz. Dosyamızı incelediğimizde; style dosyasını, 4 adet farklı formattaki fontlarımız ve önizlemesini yapacağımız demo html dosyamızın oluştuğunu görebiliriz. 

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

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

}

Bazı TTF dosyaları 1Mb bulduğunu düşünürsek biraz yükleme zamanını düşünerek sitede kullanılmayacak bazı yazı tipi karakterleri kaldırılabilir. Yazı tipi dosyaları belli karakter setlerini içerir. Latin harfleri, Yunan harfleri, Para işaretleri gibi. Bu karakter setlerinde kullanmadıklarımızı silip yazı tipi dosyasının boyutunu azaltabiliriz. Aynı şekilde tek tek karakterleri de silebiliriz. 

Burada dikkat edilecek en önemli husus, tarayıcılar da yükleme tamamlanınca yazı göründüğü için font-face tanımını sayfamızın en üstüne koymalıyız. Script dosyalarımız varsa onları tanımlamamızdan sonraya koymalıyız.

Yazı tipi dosyaları ön belleğe alındığı için kullanıcının sonraki ziyaretlerinde daha az bekleme yapacaktır.