Cufon nedir? Nasıl kullanılır? Türkçe karakter sorunu çözümü?

Cufon, web sayfalarında istediğimiz fontları kullanmamıza imkan sağlayan sIFR’a alternatif son günlerde sıkça karşılaştığımız bir teknik. Bu sayede hoşumuza giden fontları ufak bir işlem ile web sayfalarımızda gösterebiliyoruz. Cufon’un sIFR’dan en önemli farkı metinleri bir flash dosyası gibi göstermeyip resim şeklinde göstermesi. Flashı bir türlü sevememiş biri olarak

Cufon Kullanımı

  1. Cufón’un temelini oluşturan Javascript dosyasını (cufon-yui.js) http://cufon.shoqolate.com/js/cufon-yui.js adresinden indirip uygulamanızın dizinine yükleyin.
  2. Kullanmak istediğiniz yazı tipini Windows/Fonts klasörü dışında bir klasöre kopyalayın. (Örneğin masaüstüne kopyalabilirsiniz)
  3. http://cufon.shoqolate.com/generate/ adresine gidin.
  4. Seçtiğiniz fontu, Regular typeface yazan yere, cufon font dönüştürücüye yükleyin.
  5. The EULAs of these fonts allow Web Embedding (without Adobe Flash) yazan yeri seçili yapın.
  6. Aşağıdan Punctuation yazan yeride seçili hale getirin. Bu işlem ile fontunuza noktalama işaretlerini eklemiş olacaksınız.
  7. .. and also these single characters yazan yere Türkçe karakterleri (IıİıÇçÖöĞğŞşÜü harflerini) girin. Böylece fontumuz Türkçe karakteri desteklemiyor olsa bile, bu karaterleri girdikten sonra artık Türkçe destekli hale gelecek.
  8. Security bölümünde, Limit usage to the following domain(s) bölümüne web sitenizin tam adresini yazarsanız, sitenizden kullandığınız fontu indirenler, başka yerde fontu kullanamazlar. Bu kısım isteğinize bağlıdır. Bu bölümü doldurarak lisanslı fontunuzun başka sitelerde kullanılmasını engellemek amacıyla kullabilirsiniz.
  9. I acknowledge and accept these terms yazan yeride seçili hale getirip LET’S DO THIS! butonuna tıklıyoruz.. Fontunuz bir javascripts dosyasını dönüştürülecek ve size indirmeniz için verecek. Örneğin fontunuz verdana ise, verdana.js olucak.

Font dönüştürme işimiz tamamlandı.Şimdi sıra web sitemize eklenecek  kodlara geldi. Sayfamızın <head> </head> tag’leri arasına aşağıdaki kodu ekliyoruz.

<script type="text/javascript" src="/js/cufon-yui.js"></script>
<script type="text/javascript" src="/js/font.js"></script>
<script type="text/javascript">
		Cufon.replace('h2', {
				textShadow: '#999999 0.4px 0.4px'
			});
		Cufon.replace(' #rssoku h2,h3,h1,h4,legend');
				Cufon.replace(' #headline');

		Cufon.replace('#comments h3', {
				textShadow: '#fff 0.7px 0.7px'
			});
</script>

Yukarıda gördüğünüz gibi öncelikle Cufón’un javascript dosyası cufon-yui.js  ekledik. Sonrasında ise fontumuzun javascript dosyasını. Altında ise hangi başlıkların ve metinleri cufon ile görüntülenmesini istediğimizi belirttik.

Cufonda Türkçe Karakter sorunu çözümü

Cufón kullanımı kısmında Font dönüştürme işleminde 7. sırada belirttiğim gibi .. and also these single characters yazan yere Türkçe karakterleri (IıİıÇçÖöĞğŞşÜü harflerini) girmemiz gerekiyor. Bu sayede oluşturulacak javascript dosyasına Tükçe karakterleri görüntülemek için kod eklenmesini sağlayacağız.

Son olarak web sitemizin veya blogumuzun  dil kodlaması UTF-8 olmalı ve dosyalarımız UTF-8 karakter seti ile biçimlendirilmiş olmasına dikkat etmeliyiz. Yoksa Türkçe karakterle görünmez.

21 Replies to “Cufon nedir? Nasıl kullanılır? Türkçe karakter sorunu çözümü?”

  1. Merhaba,

    Sitedeki tüm fontları cufon olarak kullansak bir sıkıntı çıkar mı sizce? İstemci yavaşlar mı?

  2. Çok teşekkur ederim ancak bir konu ya açıklık getirilmemis,
    Acaba bu js fontlari nereye yukleyecegiz yine font dosyasina mi ?..
    denedim ama duzelmedi, baska nasil bir yol olabilir… utf dosyam da 8 oradada sorun yok ama fontlari nereye atacagim, birde isimlerini de degisik verdi..
    Verdana_400-Verdana_700-Verdana_italic_400-Verdana_italic_700.font
    Tahoma_400-Tahoma_700-Verdana_700.font

    1. Oluşturulan dosya adı Verdana_italic_700.font.js ise head head tagları arasındaki
      /js/font.js bölümünü
      /js/Verdana_italic_700.font.js
      şeklinde değiştirerek font dosyasını js klasörünün altına kopyalıyoruz.

      Türkçe karakter içermeyen başka font dosyamız varsa o satırı kaldırıyoruz. Böylece türkçe karakter sorununu çözmüş oluyoruz.

      Yaptığınız açıklama için ayrıca teşekkür ederim.

  3. sorunu cozdum belki baska arkadaslarima da yardimim dokunur diye yaziyorum

    bu bolumu silince turkce karekterler cikti…..
    3 gundur ugrasiyordum, nihayet buldum,
    selamlar berlinden

  4. silinen bolum cikmamis

    eger sayfanizda
    script type bolumunde

    js/colaboratelight_400.font.js

    varsa
    bu bolumu bulup siliyoruz ve guzel turkcemize kavusuyoruz…. dilerim bu kez script bolumu cikar……. :)))

  5. Abuk sabuk bilgiler yerine herkes şu yazı gibi faydalı makaleler paylaşsa ne hoş olurdu. Gerçekten teşekkürler.

  6. Üstat ellerine sağlık, nasıl güzel bir iş yapmışsın sağol. Gerçekten çok işime yarayacak.

  7. Teşekkürler bir çok bilmeyen arkadaş için öğretici bir metin olmu.Internet Explorer daki bulanık gelmesinin sebebi nedir sizce? Çözümü varmıdır?

  8. Tesekkurler, sadece font squirrel generator yontemini biliyordum bu iyi bir alternatif oldu. Yalniz alternatif yonyemleri de anlan bir yazi yazsaniz cok ilgi cekebilir. İyi calismalar.

  9. Bende HTML-Css tarzı bir sitede js kodlar kullanılmıştı. Bu işte profesyonel değilim ancak çok araştırdım türkçe karakter çözümünü. En son

    Yukarıdaki satırlardan alttaki şu iki satırı tamamen sildim karakter sorunu çözüldü

    sanırım en kolayı bu fontları tek tek elle düzenlerim nasılsa…

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir