Bir web sitesi tasarladınız ancak sizin kullanmak istediğiniz yazı tipi (font) ziyaretçilerinizin bilgisayarında bulunmayacağı için internet tarayıcısı bu yazı tipini tanımayacak ve yazılarınız için bir başka yazı tipi kullanacaktır. Bu ve bu gibi durumlarda seçtiğiniz yazı tipinin herkes tarafından tanınmasını ve kullanılmasını istiyorsanız istediğiniz yazı tipini sunucunuza yükledikten sonra CSS’nizde tanımlayacağınız “@font-face” etiketi ile ziyaretçilerinizin seçtiğiniz yazı tipini görmesini sağlayabilirsiniz.
CSS kodumuza geçmeden öncelikle @font-face yazı tipi çeşitlerinden bahsetmek istiyorum. Popüler internet tarayıcılarının genel olarak desteklediği 4 çeşit yazı tipi bulunmakta. Bunlar .ttf, .otf, .eot ve .svg dir. Yine bu yazı tiplerinden genel olarak bahsetmek gerekirsek:
.ttf Yazı Tipi:
Windows işletim sisteminin kullandığı bu yazı tipi Firefox, Safari, Chrome ve Opera tarayıcıları tarafından desteklenmektedir. Anlamı True Type Font’tur.
.otf Yazı Tipi:
Yine genelde windows işletim sisteminin kullandığı bir yazı tipi dosyasıdır. Anlamı Open Type Font’tur. Firefox, Safari ve Opera tarayıcıları tarafından desteklenmektedir.
.eot Yazı Tipi:
Embedded Open Type anlamına gelen bu yazı tipi Microsoft’un baştan beri desteklediği bir yazı tipidir. Internet Explorer’ın tanıdığı tek yazı tipi dosyasıdır. Bu yüzden web tasarımcıları için bir sorun oluşturmaktadır. Yine internette bulunan bazı yazı tipi dönüştürücüleri ile .ttf uzantılı yazı tipimizi .eot yazı tipine dönüştürüp kullanabilirsiniz. Buradaki çevirici araç tavsiyemdir.
.svg Yazı Tipi:
Esnek yapılı yani vektörel bir yazı tipi dosyasıdır. Anlamı Scalable Vector Graphics yani Ölçeklenebilir Vektörel Grafikler’dir. Safari, Chrome ve Opera tarayıcıları tarafından desteklenmektedir.
@font-face Kodu ve Kullanımı:
Basit olarak @font-face kodunun kullanımı şu şekildedir.
@font-face {
font-family: Sorbize;
src: url(http://www.sorbize.com/fontlar/Sorbize.ttf);
}
p {
font-family: Sorbize;
}Kod yapımız gördüğünüz gibi iki kısımdan oluşmaktadır. İlk olarak yazı tipimizi yüklüyoruz ve daha sonra bu yazı tipini istediğimiz yerde font-family etiketi ile kullanıyoruz.
Ancak ne yazıkki durum bu kadarda kolay değil. Burada kullandığımız yazı tipi .tff uzantılı yazı tipi dosyası. Bu yazı tipi baştada belirttiğim gibi internet explorer tarafından desteklenmemekte. Ayrıca her tarayıcının her versiyonun @font-face kodumuzu desteklemesi içinse şu şekilde bir kod yapısı kullanmamız gerekiyor.
@font-face {
font-family: 'Sorbize';
src: url('Sorbize2.eot');
src: local('Sorbize'),
url('Sorbize2.woff') format('woff'),
url('Sorbize2.svg#Sorbize2') format('svg'),
url('Sorbize2.TTF') format('truetype');
}
p {
font-family: Sorbize;
}Bu kod yapımızda sisteme öncelikle .eot uzantılı “Sorbize2″ yazı tipimizi tanıttık. Bunu internet explorer için yaptık. Sonrasında gelen kodlar ise diğer tarayıcılar için. Buradaki local tanımı ise eğer kişinin bilgisayarında bu yazı tipi mevcutsa yazı tipini indirmeden direk kullanmak ve bir sonraki kodu internet explorer’dan gizlemek için. Devamı gelen kodlama ise diğer tarayıcılar içindir.
Sonuç olarak şuanki tarayıcı istatistiklerine baktığımızda %94 ‘lük bir kesim @font-face ‘i desteklemekte. İleride tarayıcı teknolojisinin ve kullanım oranlarının değişmesi ile birlilte bu sayı %98 ‘e kadar çıkacaktır. Bu yüzden web sitenizde @font-face kodunu kullanmanız size pek bir zarar sağlamayacaktır. Hatta belkide web sitenizin görünümünün güzelleşmesi ve estetikleşmesi ziyaretçilerinizi daha çok sitenizde tutacak ve size daha fazla ziyaretçi sağlayacaktır.
Kaynak: Web Sitenizde İstediğiniz Yazı Tipini Kullanın
