Web tarayıcıların gelişmesiyle artık (kısıtlı da olsa) Css3′ün nimetlerinden faydalanabiliyoruz. Bu makalemizde basit olarak özel bir yazıtipinin Css3‘te kullanımını ve gösterimini (Font Embed, Yazıtipi gömme olarakta dilimize çevirebiliriz) anlatacağız. Yapacağımız örnekleri Firefox 3.5+ sürümlerde rahatlıkla görebilirsiniz.

Önce örneğimizde kullanacağımız yazıtipini belirleyelim. Ben şurada bulunan White Board Modern isimli yazıtipini indirdim. Dilerseniz siz farklı bir yazıtipi kullanabilirsiniz. İndirdiğimiz yazıtipini gösterecek olan Css kodlarımızı yazalım ve bu yazdığımız kodu işleme koyacak olan bir alanda gösterelim.
@font-face {
font-family: “White Board Modern”;
src: url(Whiteboard-Modern-Demo.ttf);
}

#ozelyazitipi {
font:24px “White Board Modern”;
color:#2e83ff;
}

Css kodumuzda gördüğünüz üzere bir Css3 nimeti olan Font-Face seçicisini kullandık. Font-family alanına kullandığımız yazıtipinin ismini yazdık. Src parametresi ile yazıtipinin bulunduğu dosyanın yolunu ve tam ismini yazdık. Bu kodu yazdıktan sonra ben bir alan oluşturdum. Bu alanda font parametresi ile az önce tanımladığım yazıtipime atıfta bulunarak bunu kullanacağımı belirttim. Şimdi yazımızı gösterecek olan Xhtml kodunu da yazalım.

<div id=”ozelyazitipi”>
BU YAZI WHITE BOARD MODERN YAZITIPI ILE YAZILDI…
</div>

Burada da #ozelyazitipi olarak belirttiğimiz id’mizi kullanarak yazımızı yazdık. Dosyayı .html formatıyla kaydederek görüntülediğinizde yazımızın ekranda belirttiğimiz yazıtipinde görünecek.

(NOT: Bu özelliğin IE tarayıcılarda görülebilmesi için kullandığımız yazıtipinin Embedded Open Type olması gerekiyormuş. Burada konuyla ilgili detayları bulabilirsiniz. Bu yazıyı hazırlarken Css Fonts Module Level 3 sayfasını referans aldım.)

ÖRNEK SAYFA