Web Sitenizde İstediğiniz Yazı Tipini Kullanın | Sorbize
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.
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.
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.
Etiketler:.eot Yazı Tipi, .otf Yazı Tipi, .svg Yazı Tipi, .ttf Yazı Tipi, @font-face, @font-face kodu, @font-face kullanımı, @font-face nedir?, @font-face örnek, @font-face yapısı, CSS, CSS @font-face kullanımı, css dersleri, CSS Font Tanımlama, CSS font-face, CSS İstediğin Fontu Kullanma, CSS Yazı Tipi Kullanımı, CSS Yazı Tipi Kullanma, Font Face TTF, İstediğin fontu kullanma, İstediğin yazı tipini kullanma Benzer Konular Bu Ayın En İyi Photoshop Dersleri
Aycan Doğanlar 31 Mayıs 2010
çok güzel bir makale olmuş ellerine sağlık, benim blogun yazı başlıklarına da uygularız bunu :)
utkuygun 25 Kasım 2010
çok yararlı bir makale , sağol
Osman bektaş 26 Şubat 2011
Gerçekten Çok yaralı ve açık vir makale fakat ben css tanıttım fontu ofonta özellik nasıl vercem onu anlamadım 2 kodumu yazcam anlamadım Burak Bey , basitbir örnek mail adresime göndere bilirseniz sevinirim
Cihat 19 Mart 2012
Gerçekten güzel bir makale olmuş, Allah razı olsun.
Mustafa SARIKAYA 03 Aralık 2012
Güzel yazı gerçekten. Teşekkürler. Ayrıca ufak bir anlatım bozukluğu var söylemekte yarar var. ” … @font-face kodunu kullanmanız size pek bir zarar sağlamayacaktır. ”
kısmını ” zarar vermeyecektir” şeklinde değiştirirseniz mantık hatası ortadan kalkacaktır..
Eren Engin 12 Ocak 2013
Çok açık bi şekilde anlatmışsınız. Bilgilendirme için teşekkürler.
Mehmet Fatih Merdammert 03 Nisan 2013
Açıklama güzel gerçekten de işe yarıyor fakat şöyle bir sıkıntı oldu menü harfleri genişledi dolayısı ile menüler sığmadı birde yazı font u iyice küçüldü bunun içinde açıklama yapabilirmisiniz ?
haberler 22 Haziran 2013
Selim Aykaç 16 Ağustos 2013
Bir kaç gündür bu sorunla boğuşuyordum. Yararlı bilgiler vermişsiniz, teşekkürler.
erhan emre 30 Temmuz 2014
bir kaç gündür temanın css’si ile kafayı bozmuştum. çok teşekkürler sitemde kullanacağım hemen
Kağan 28 Temmuz 2015
Teşekkürler cidden çok faydalı bir konu olmuş