css ile yazı tipi kullanmak (use custom fonts with css)

Öncelikle ne yapmak istediğimizi anlatayım; bildiğiniz gibi internet sitelerinin tasarımlarında, son kullanıcının bilgisayarında bulunmayan fontlar kullanabiliyoruz. Bu fontların bulunduğu alanlar için (genellikle başlık, logo gibi bölümler) png, jpg, gif gibi resim dosyaları veya flash gibi ek programlar ile yaratılmış dosyalar kullanıyoruz.

Bu durumun bize iki zararı oluyor; dosyaların boyutları (kb cinsinden) artmış oluyor, bu bölümler google ve benzeri arama motorları tarafından okunmuyor.

Şimdi bazı meslektaşlar image tagının alt parametresinden veya css ile yaptığımız text-indent:-9999px den bahsedebilirler.

Peki bu şekilde kıvranmak yerine, sayfanın istediğiniz bölümünde istediğiniz metni istediğiniz yazıtipi (font) ile gösterseniz daha güzel olmazmı ?

Bunu yapmak gerçekten çok kolay;
Öncelikle yazı tipi dosyamızı belirli formatlara çevirmemiz gerekecek. Bu sebeple aşağıdaki adrese gidiyor ve yazı tipi dosyamızı yükleyerek convert edilmesini istiyoruz.

http://www.fontsquirrel.com/fontface/generator

işlem tamamlandığında size ismi “webfontkit” kelimesi ile başlayan bir arşiv dosyası indirtecek. Bu dosyanın içinde bizim için gerekli olan webfont dosyaları ve örnek kodlar var.

Şimdi “font” isimli bir klasör oluşturuyoruz ve içine bu arşiv dosyasından çıkan “.eot, .svg, .ttf, .woff” uzantılı font dosyalarını yerleştiriyoruz.

Yine “font isimli klasörün içine “font.css” isimli bir dosya oluşturarak içine aşağıdaki kodu yazıyoruz.

@font-face {
    font-family: 'StencilRegular';
    src: url('exo2_stencil-webfont.eot');
    src: local('☺'), url('exo2_stencil-webfont.woff') format('woff'), url('exo2_stencil-webfont.ttf') format('truetype'), url('exo2_stencil-webfont.svg#webfontMywnyopY') format('svg');
    font-weight: normal;
    font-style: normal;
}

Burada font-family olarak verdiğiniz değere dikkat edin, daha sonra fontu çağırmak için bu kodu kullanacağız.

HTML sayfamızın head tagı içerisine aşağıdaki kodu ekleyerek işlemi tamamlıyoruz.

<link rel="stylesheet" href="font/font.css" type="text/css" charset="utf-8">

Artık sayfa kodlarınızda veya css kodlarınızın herhangi bir yerinde

.fontum{
    font-weight: normal;
    font-style: normal;
    line-height:normal;
    font-family: 'StencilRegular', sans-serif;
    font-size-adjust: 0.78;
    font-size: 11px;
}

şeklinde kullanabilirsiniz.

ilgili dosyaları buradan indirebilir veya çalışmakta olan örneğe buradan bakabilirsiniz.