Css3 ile @font-face kullanımı

Sitemdeki yazı tipini değiştirmeyi düşünürken aklıma Css’teki font-face kullanımı aklıma geldi. Uzun süredir font-face’i bilmeme rağmen ya uygulamaya vakit ayıramadım ya da üşengeçliğim tuttuğu için uğraşmamıştım. Sitede ufak ufak değişiklikler yaparken font-face’i de hem sitede uygulayıp hem de sitede yazayım diye düşündüm. @font-face’i kullanmak son derece kolay. Sitenizde yeni, boş bir klasör oluşturun. Sonra bu klasörün içerisine kullanmayı istediğiniz yazı tipini koyun. Css dosyanızı açıp aşağıdaki kodları ekleyin.

[css]@font-face
{
font-family: BreeSerif;
src: url("klasör_ismi/BreeSerif.otf");
}[/css]

Url kısmında, sitenizde oluşturduğunuz klasörün ismi ve yazı tipinin adı yer almalı. Font-family kısmında da aynı şekilde yazı tipi yer almalı. Eğer bu yazı tipini parağraflar için kullanmak istiyorsanız aşağıdaki kodu css dosyanıza ekleyin.

[css]p { font-family: BreeSerif; }[/css]

Css dosyanızda parağraf için önceden tanımlanmış bir yazı tipi muhtemelen vardır. Böyle bir durum söz konusuysa yukarıdaki kodu direkt yapıştırmak yerine yazı tipinin adını, kendi eklediğiniz yazı tipi olarak ayarlayın.

Hepsi bu kadar.

Not: Eğer bu yöntem işe yaramıyorsa muhtemelen bir yerlerde yazım hatası yapıyorsunuzdur. Yazım hatalarınızı kontrol ediniz. Ayrıca font-face yönteminde yazıların az da olsa geç yüklendiğini unutmayın.