CSS’in özelliklerinden birisi olan @font-face’den kısaca bahsedeceğim biraz. Kolay en basit haliyle nasıl kullanacağımızdan ve web sitelerimizde istediğimiz fontları nasıl kullanacağımızdan bahsedececeğim.

İlk olarak kullanmak istediğiniz fontu ayarlayın. Sevdiğiniz, tasarıma uygun bir font belirledikten sonra aşağıdaki CSS kodları ile fontumuzu nasıl kullacağımıza bir bakalım.

@font-face {
font-family: ‘elma’;
src: url(‘fonts/fontadi.otf’);
}

font-family: ‘elma’; Burada belirleyeceğimiz CSS kodları arasında fontumuzu nasıl çağırmak istiyorsan o isimi veriyoruz. Mesela h1 içerisinde bu @font-face özelliğini kullanmak istiyorsak h1′in fontunu şu şekilde belirlememiz gerekir; font-family:’elma’;

src: url(‘fonts/fontadi.otf’); Burada ise sayfamıza bir resim eklediğinizi düşünün. Resimi images klasörüne eklersiniz değil mi? Aynın onun gibi fonts adında bir klasör oluşturun ve fontunuzu o klasörün içerisine ekleyin. Fontu klasörden çağırırken debu şekilde çağırmanız gerekir.

Biz örnek olması açısından h1 içerisinde kullanalım. h1 kodları iseaşağıdaki gibi olmalıdır:

h1 {
font-family:”elma”;
}

h1 ve @font-face kodlarımızı yazdıktan sonra fontumuzu html kodlarımızın içerisinde kullanabiliriz. H1 içerisinde her hangi bir cümle yazarak ve sayfanıza yukarıdaki CSS kodlarını ekleyerek çalışmanızı test edebilirsiniz.

Benim hazırladığım örneğin kodları ve ekran görüntüsü aşağıdaki gibidir. Kullandığım font ise GoodDog. Fontu buradan indirebilirsiniz.

70 views

RenkliTeneke.Com blogundaki yeni yazılardan haberdar olmak için RSS Abonesi olabilirsiniz. İsterseniz Twitter'dan ya da FriendFeed'den takip edebilirsiniz. Ya da "Yeni yazılar e-mail adresime gelsin" diyorsanız e-mail abonesi olabilirsiniz.

Merhaba sevgili ziyaretçi. Şuanda renkliteneke.com bloguna " Ahmet" tarafından " 16 Kasım 2011" tarihinde yazılmış olan "En basit haliyle @font-face kullanımı" başlıklı bu yazıyı okuyorsun. Bu yazının başka bir yerde yayınlaması yasaktır. Her yazı ayrı bir özen içerisinde hazırlanıyor ve bu emeğin iki tık ile heba edilmesi pek hoşuma gitmez. Bu açıklama ise bilgilenmeniz için yazılmıştır.