Cufon Nedir ? Nasıl Kullanılır ?

Cufón, internet sitelerinin kullandığı ve genellikle wordpress altyapısını kullanan platformlarda sıkça rastlayabileceğiniz,  başlık metinlerini kopyalanamaz bir resim haline getiren JS kodlamadır. Cufón nedir, ne işe yarar ve nasıl yapılır bir kaç bilgi vererek bu yazının da amacına ulaşmak istiyorum. Varsayılan başlık yazı fontlarını işlevsel olarak değiştirmeyen ancak daha sağlam ve keskin olmayan hatlara kavuşturan Cufón ile hem tasarımsal bir artı kazanırsınız hem de fonksiyondan bir kayıp yaşamazsınız. Cufón kullanılan başlıklar belirttiğim gibi kopyalanamaz.Cufón ‘un yanında yine bu özelliğe sahip ama farklı bir yoldan yapan sIFR ‘da mevcut ancak bu yazıda Cufón’un artı ve eksileriden bahsedip nasıl yapıldığına geçelim.

  • Cufón JS kullanır, bu yüzden hızlı ve ek bir işlem gerektirmez.
  • Güncel tarayıcılarda sorunsuz bir şekilde çalışır.
  • Cufón fontunuzu sadece bir sitede kullanılacak şekilde ayarlarsanız size ait olan özel fontun çalınmasını önleyebilirsiniz.
  • Farklı ayarlanabilir parametrelerle fontunuzun boyutunu düşürüp daha hızlı açılmasını sağlayabilirsiniz.

Cufón kullanırken karşılaşabileceğiniz sorunlar ise şu şekilde ;

  • Metinler resim görünümünde olduğu için tarama vasıtası ile seçemezsiniz. Bu bir bakıma içerik korunması anlamına da geliyor.
  • Bazı eski tarayıcılarda uyum sorunu yaşanıyor, örneğin Internet Explorer’ın güncel versiyonunu kullanmıyorsanız bir kaç kod eklemesi yapmanız gerekiyor.

Her ne kadar eksi diye bahsetsem de bu özellikler ilerleyen günlerde giderilebilecek olduğu için Cufón kullanmak bizim için avantaj diyebilirim.

Bir kaç bilgi verdikten sonra gelelim Cufón nasıl kullanılır konusuna.

  • Buradan Cufón’a ait olan ve çalışması için gerekli kütüphane dosyasına burayı tıklayarak ulaşabilirsiniz. İndirdiğiniz dosyayı tavsiyem olarak temanızın içerisinde “js” adlı bir klasör oluşturup içine atın.
  • Kullanmak istediğiniz fontu belirleyin ve buraya tıklayarak Cufón Generator adlı, fontunuzu Cufón stiline çevirecek olan dönüştürücüye gidin.
  • Dönüştürücüde yapmanız gereken bir kaç ayardan bahsedeyim
  1. Öncelikle fontumuzun ismi “Diavlo” olsun. Bu font benim de Cufón şeklinde kullandığım fonttur. Yani örnek için benim başlıklarıma bakabilirsiniz.
  2. “Select the font you’d like to use” sekmesinde size bir kaç yükleme seçeneği sunuyor. Burada kullanmak istediğiniz yazı stilini seçmelisiniz. Ancak yükleyeceğiniz fontun bold yani kalın stilini kullanacaksanız kalın fontu içeren dosyayı “bold typeface” butonunu kullanarak yüklemelisiniz. Böylelikle ek bir ayar yapmadan yazı tipleriniz otomatik olarak algılanacak ve kalın yazı stili olan yerlerde otomatik olarak kalın font kullanılacak. “Regular typeface” ve “Bold typeface” bizim için yeterli.

    Cufon

  3. Fontumuzu seçtikten sonra hemen aşağıda bulunan “The EULAs of these fonts allow Web Embedding (without Adobe Flash)” kutucuğunu işaretliyoruz.
  4. “Include the following glyphs” sekmesine geçiyoruz. Burada yazı fontumuza ek olarak ekleyeceğimiz elemanları seçiyoruz. Bu aşamada “Punctuation” kutucuğunu seçip “.. and also these single characters” olan kutuya da Türkçe karakterleri yazmalısınız. Bu karakterler ; İıĞğÜüÖöÇ窺 olmalı.
  5. “Security” sekmesinde ise oluşturacağımız fontun hangi alan adlarında çalışması gerektiğini belirleyeceğiz. Eğer ki ücretli bir font kullanıyor ve fontunuzun çalınmasını istemiyorsanız buraya fontu kullanacağınız bir alan adı yazarak bir nevi alan adına fontunuzu lisanslamış olacaksınız.
  6. “Performance & File size” sekmesinde fontunuzu siteniz için optimize edebilirsiniz. Ancak bu konuda bir bilgi sahibi değilseniz bu adımı atlayabilirsiniz.
  7. “Customization” sekmesini de geçebilirsiniz.
  8. Son olarak “I acknowledge and accept these terms” kutucuğunu işaretleyip “Let’s do this” butonuna tıkladığınızda fontunuz bir kaç saniye içerisinde Cufón JS olarak indirmeye hazır hale gelecektir.
  • Buraya kadar yaptığımız işlemler sonunda elde ettiğimiz font JS dosyamızı, temamızın klasöründe oluşturduğumuz “js” klasörüne gönderelim. Diyelim ki font dosyamız “Diavlo.font.js” olsun.
  • Materyal elde etme işlemi tamamlandığına göre şimdi kodlama kısmına geçebiliriz.

Cufon

İndirdiğimiz Cufón JS kütüphanesini ve Cufón fontumuzu “js” klasörümüzün içine gönderdik.
<script type=”text/javascript”
src=”<?php bloginfo(‘template_directory’); ?>/js/cufon-yui.js”>
</script>
<script type=”text/javascript”
src=”<?php bloginfo(‘template_directory’); ?>/js/Diavlo.font.js”>
</script>
<script type=”text/javascript”>
Cufon.replace('h1');
</script>

Bu kodu kopyalayıp </head> etiketinden hemen öncesine ekleyip dosyayı kaydedin.
Uyarı : Dosyalarda değişiklik yapmadan önce mutlaka yedek alın.

Bu kodu ekledikten sonra sitenizdeki tüm “h1” etiketli yazılarınız Cufón görünümüne sahip olacaktır.

Örneğin Bu Şekilde

Sonuç olarak Cufón web tasarım ya da kodlama kullanan arkadaşların işine yarayacak bir özellik. Türkçe karakter konusunda sıkıntısı olmayan bir font kullanırsanız tadından yenmez bir işlevsellik kazanır.

sIFR şu an için daha sağlam gibi gözükse de yakın zamanda yapılan geliştirmeler ve düzeltmelerle Cufón ‘un da lider konuma gelmesini bekliyorum.

Bir başka yazıda görüşmek dileği ile, kolay gelsin.

Kenan CANOL

Google sayfama göz atabilirsiniz.

4 yorum

  1. Muhammed ÇELİK   •  

    Google nasıl anlayacak Cufon ile yazılan yazıları ? SEO ile ilgileniyorsak bu bir problem ?

    • admin   •     Yazar

      Başlıkların sadece görüntüsü değişiyor, yani kod yapısında bir değişiklik yok. Cufon’un yaptığı sadece Merhaba gibi etiketlenmiş kodu Cufon stilinde “Merhaba” olarak yazmak. Google kod yapısını okuduğu için bir sorun olmayacaktır. Sayfanın kaynak görüntülerine bakabilirsiniz.

  2. Muhammed ÇELİK   •  

    Tamam sağol bilgi için 🙂 Yazıyı almak isteyen adam kaynak kodlarından alsın o zaman :p

    • admin   •     Yazar

      İstersem şifreleyim adam yine alıyor dostum ya bezmiyorlar (:

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir