Web Sitesine Yazı Tipi Ekleme

11 Haziran
Kategori :Dreamweaver, HTML, CSS
34913

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 Otf ya da 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” olarak belirleyip açılan listeden Subsetting seçeneğinde bulunan Custom Subsetting özelliğini işaretleyerek Turkish ve Basic Latin özelliklerini işaretlemelisiniz.

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. Dikkat edilmesi gereken nokta font-face içindeki url kısımlarında fontları nerede barındırıyorsanız kaynağını düzenlemeniz gerekiyor. Aşağıdaki örnekte font dosyaları ve kodun bulunduğu css dosyası kök dizende olduğu varsayılmıştır.

@font-face {

font-family: ‘myfont’;

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;

}

İ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.

h1 {

font-family:myfont;

}

Kolay Gelsin …