Bir Font Sitesi Olarak CufonFonts.com

Cufon u bilenler vardır. Bilmeyenler için bu yazımda Cufon adlı teknolojiyi ve cufon için oluşturulmuş bir font sitesini de tanıtmaya çalışacağım.

Web sayfalarında dikkat ettiyseniz göz alıcı, ilgi çekici fontlar pek tercih edilmez. Çünkü her font, siteyi ziyaret edenin bilgisayarında bulunmadığı için ya da tarayıcısı desteklemediği için ziyaretçide düzgün çalışmaz. Bu soruna bir çözüm olarak değişik yöntemler geliştirilmiştir. Bu yöntemlerden biri de tamamen javascript tabanlı Cufon eklentisidir.

Cufon, bir web sayfasında istenilen fontun sorunsuzca gösterilebilmesi için oluşturumuş bir teknolojidir. Javascript tabanlı olmasından dolayı hız konusunda avantaj sağlıyor.

Cufon ile sayfaya entegre edilmiş bir font  her ne kadar resim olarak eklenmiş görünsede, kaynak kodu incelediğinizde resim olarak değil tamamen yazı olarak eklendiğini görebilirsiniz. Bu noktada ” Cufon SEO’ya uygun mu ? ” sorusuna kesinlikle evet diyebiliriz. SEO ya ne pozitif ne de negatif bir etki yapmıyor. Gönül rahatlığı ile kullanabilirsiniz.

Gelelim Cufon un nasıl kullanılacağına

Öncelikle buradaki doyayı indirip sayfanıza entegre etmelisiniz. (Sağ tıklayıp farklı kaydedin.) Bu bir javascript dosyası olduğundan şu şekilde sayfanıza ekleyebilirsiniz ;

<script type="text/javascript" src="cufon-yui.js"><script>

Bu işlemi yaptıktan sonra sayfaya istediğiniz fontun cufon dosyasını entegre etmelisiniz. Tam bu noktada yukarıda bahsettiğim gibi bir font sitesini tanıtacağım.

CufonFonts.com sitesi normal bir font sitesinden farklı olarak size hem fontun normal halini, hem font-face ile sayfaya entegre edebileceğiniz halini (font-face kitini), hem de fontun cufon dosyasını indirebilme imkanı sağlıyor ve bizi büyük yüklerden kurtarıyor.

Not : Şu an sitede 9000 farklı font varmış.

O zaman kaldığımız yerden devam edelim, dilediğiniz fontun cufon dosyasını da indirdikten sonra sayfaya entegre edebiliriz (Myriad Pro adlı fontu indirdiğimizi varsayalım) ;

<script src="myriad-pro.cufonfonts.js" type="text/javascript"></script>

Artık sayfanızda bu fontu kullanılabilir hale geldiniz. Son olarak da birkaç kullanım örneği ile yazıyı bitirelim ;

<script type="text/javascript">
Cufon.replace('p, h1, h2, h3', {
   fontFamily: 'Myriad Pro Regular', hover: true
}); // p, h1, h2, h2 tagları seçildi. Bu tagların fontu Myriad Pro olacak.
Cufon.replace('.header p, .footer h4', {
   fontFamily: 'Myriad Pro Condensed Italic', hover: true
}); // Header sınıfı içindeki p, footer sınıfı içindeki h4 tagları seçildi.
</script>

Sonuç

Benim fikrim bu teknolojinin çok yararlı olduğu yönünde, zaten kendi sitemde ve kodladığım sitelerde de kullanmaktayım. Şiddetle tavsiye ediyorum.

Benzer Yazılar

Yorumlar

Yorum Yazın

Su elementleri kullanabilirsiniz : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Arama
RSS
Beni yukari isinla