Font face ile yazı tipi kullanımı

Yazar: sanalzade Tarih: 28 Mart 2012

Web sitelerinizi font face yöntemi ile zenginleştirin…

Web tasarımda standart (default) yazı tipi (font) kullanımı azalmaya başladı. Göze hitap açısından daha şık ve güzel  fontları kullanmak görsel açıdan daha uygun bulunuyor.

Yapılan tasarımları web ‘e aktarırken (html, css vb.) haline getirirken tasarımda kullanılan yazı tiplerinin yansıtılması sıkıntı yaratabiliyor. Bu yazımızda istenen fontu html içerisinde kullanılmasını sağlayan @font-face yöntemi ve kullanımından bahsedeceğiz.

Font Face Generator

Font dosyalarını üreten ”font-face generator” ile istediğiniz yazı tipinin (font) ”.ttf”, ”otf” uzantılı dosyasını yüklüyorsunuz ve size web site dahilinde kullanmanız gereken yazı tipi dosyalarını ve çağırmanız gereken css kodunu veriyor.

Hangi fontları kullanabilirim ?

İnternet üzerinden indirdiğiniz her yazı tipini Font Face yönteminde kullanamazsınız, yani ücretli olarak satılan lisanslı yazı tiplerini Face Generator ile css ye dökemezsiniz, beğendiğiniz yazı tipini kullanmak için kesinlikle satın almanız gerekmektedir. Alternatif olarak…

Font Face Kit sayfasından, ücretsiz olarak kullanabileceğiniz çeşitli fontları indirebilirsiniz. İlgili adrese giriş yaptıkdan sonra sağ altlarında yazan Download Otf ya da Download Ttf linklerine tıklamanız yeterli.

Font Face Generator kullanımı

Belirlediğiniz yazı tipinin dosyalarını üretmek için,  yukarıda belirttiğim @font-face Generator sayfasına girin. Add fonts butonu ile istediğiniz fontu  ekleyin.

Herhangi bir ekstra değişiklik yapmanız gerekmiyorsa seçenekleri ”OPTIMAL” olarak bırakın. Eğer türkçe karakter, boyut gibi sorunlarınız olursa seçeneği ”EXPERT” seçeneğini aktif edebilirsiniz.

Daha sonra ”Agreement” panelinde ”Yes, the fonts I’m uploading are legally eligible for web embedding.” yazan kutuyu işaretleyin.

Sağ alt kısımdaki ”Download” butonu ile hazırlanan dosyayı web sitenizde kullanmak üzere indirebilirsiniz. İndirdiğiniz zip içerisinde Font isminde .svg, woff , eot  .ttf uzantılar ile demo html sayfası ve stylesheet stili içeren bir dosyaların olduğunu göreceksiniz.

Sitede Font Face Kullanmak

Web Sitenizde @font-face kullanmak için zipten indirdiğiniz dosyaları font isminde (tercihe bağlı) bir klasör oluşturun ve içine atın daha sonra sitenizin mevcut style.css dosyarını açın ve ilgili kodları yerleştirin. Font face kullanımı için zip ile birlikte indirdiğiniz demo.html sayfasına bakarak nasıl kullanıldığını kolay bir şekilde kavrayabilirsiniz.

[php]
@font-face {
font-family: ‘DeutschGothicNormal’;
src: url(‘Deutsch-webfont.eot’);
src: url(‘Deutsch-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘Deutsch-webfont.woff’) format(‘woff’),
url(‘Deutsch-webfont.ttf’) format(‘truetype’),
url(‘Deutsch-webfont.svg#DeutschGothicNormal’) format(‘svg’);
font-weight: normal;
font-style: normal;

}
[/php]

İlgili .svg, woff , eot  .ttf uzantılarını çağırma işlemini ve ilgili css dökümünü css (stil dosyanız) ‘nize ekledikden sonra web sitenizde tanımladığınız fontu  örnek olarak aşağıdaki gibi kullanabilirsiniz.

[php] h2{font-family: ‘DeutschGothicNormal’, Sans-Serif; font-size:20px; float:left;} [/php]

Bu işlem hakkında kafanıza takılan tüm soruları aşağıdaki yorum alanından belirtebilirsiniz. Bi sonraki yazımızda görüşmek dileği ile…

 

Etiketler
Yorumlar

2 Yorum Yapılmış!

Ehl-i Blog

Mar 29, 2012

En sinir bozucu olan da beğendiğiniz yazı tipinin Türkçe karakter desteklememesi =(

Cevapla

ali çakır

Ağu 15, 2012

firefox ta bu sistem ile font çağırma çalışmıyor sanırım. yada ben mi yapamadım.
firefox ile font çağırmak için alternatif bir yol var mıdır?

Cevapla

Yorum yapmak ister misin?


Benzer Yazılar