Skip to Content
Anasayfa » Tema Kullanım ve Geliştirme

Tema içinde Cufon kütüphanesi kullanma

aydos, Sal, 11/05/2010 - 20:02 tarihinde.

Beğendiğiniz fakat web tarayıcısının gösteremediği bir yazıtipini web sayfanızda kullanmak isterseniz, cufon eklentisini kullanabilir ya da temanızın içinde cufon kütüphanesini gömebilirsiniz. Bu yazımızda ikinci metotu inceliyeceğiz.

İlk olarak web sitemizde kullanmak istediğimiz yazıtipinin javacsript versiyonunu üretiyoruz:

  • http://cufon.shoqolate.com/generate/ adresini ziyaret edin
  • İlk kısımda ("select the font ...") beğendiğiniz font dosyasının normal, italik, koyu, koyu italik durumları içeren dosyalarını ilgili kutucuklara girin.
  • DİKKAT: Oluşan dosyanın boyutunu küçük tutmak için eğer gerekmiyorsa italik, koyu, koyu italik dosyaları girmeyin
  • DİKKAT: Eğer yazıtipiniz windows/fonts dizinindeyse başka yere kopyalamanız, oradan yüklemeniz gerekiyor
  • Eğer bu fontun cufon ile kullanılması için yetki, izin varsa "The EULA.." kutucuğunu işaretleyin (işaretlemezseniz fontunuzu oluşturamazsınız).
  • İkinci kısımda ("Include the fol...") dosyanızda hangi karakterlerin bulunmasını istiyorsanız onları seçiyorsunuz.
  • Burada "Basic Latin" seçili geliyor. Buna Türkçe karakterleri eklemek için seçim kutucukların altındaki kutuya "ışöçğüİŞÖÇĞÜâîûÂÎÛ" girin.
  • Eğer daha az karakter işinizi görüyorsa Basic Latin seçimini kaldırın ve bu seçim kutucuklarını ve aşağıdaki kutuyu kullanarak karakter setinizi hazırlayın
  • DİKKAT: Boşluk da bir karakterdir.
  • Security kısmında bu dosyayı kullanabilecek siteleri girin.
  • Performance ve Customization kısımlarını olduğu gibi bırakın.
  • Terms kısmındaki kutucuğu işaretleyin.
  • "Let's do this" düğmeciğine tıklayarak yazıtipi dosyanızı ("Arial_400.font.js" benzeri bir dosya) oluşturun ve kaydedin.

İkinci olarak http://cufon.shoqolate.com/js/cufon-yui.js adresinden cufon kütüphanesini indirin. Bu iki dosyayı temanız klasörüne kopyalayın. Daha sonra temanızın .info dosyasına aşağıdaki satırları ekleyin:

scripts[] = calistir.js
scripts[] = cufon-yui.js
scripts[] = Arial_400.font.js

Burada "Arial_400.font.js" yerine kendi yazıtipi dosyanızın adını yazın.
Gene tema dizininde "calistir.js" dosyası oluşturun ve içini aşağıdaki gibi doldurun:
Drupal.behaviors.myCufon = function(context) {
        Cufon.replace('h2');
        Cufon.replace('#content h3');
}

Buradaki "Cufon.replace" satırları örnektir. İlk satır sitenizdeki bütün h2 taglarını, ikinci satır ise id'si content olan elementin içindeki h3 taglarını beğendiğimiz yazıtipi ile yazar. Benzer satırları istediğiniz gibi ekleyebilirsiniz.

İyi çalışmalar dileklerimle.

cihan, Çrş, 12/05/2010 - 17:46 tarihinde.

Uzun süreden sonra ilk ders teşekkürler paylaşımın için.

aydos, Per, 13/05/2010 - 21:50 tarihinde.

ben teşekkür ederim...
tema içinde javascript kullanımına küçük bir örnek oldu. jQuery ve benzeri kullanımlara genişletmek lazım dersleri.

Mikuru, Per, 13/05/2010 - 15:26 tarihinde.

teşekkürler

orhan, Cuma, 14/05/2010 - 23:27 tarihinde.

http://cufon.shoqolate.com/js/cufon-yui.js adresinden bi şey indiremiyoruz?

aydos, Pzr, 16/05/2010 - 00:25 tarihinde.

ekrana gelen kodu cufon-yui.js olarak kaydedin...

orhan, Sal, 18/05/2010 - 03:52 tarihinde.

Kodu dediğiniz gibi kaydettim. Fontu da aynen üstte anlattığınız gibi sitenin geçerli tema klasörune attım. Sonra .info dosyasında değişiklik yapıp diğer dosyayı da oluşturdum ama bi değişiklik olmadı. Tema kaynaklıdir diye Garland'da denedim yine olmadı..

aydos, Sal, 18/05/2010 - 11:36 tarihinde.

dersi tekrar kontrol ettim ve garland üzerinde denedim: sorun yok.

.info dosyasını değiştirdikten sonra admin/settings/performance sayfasından "clear cache" yapıyor musunuz? yaptığınız değişikliklerin etkin olabilmesi için bunu yapmanız lazım.

eğer yukarıdaki adım işe yaramazsa
* cufon-yui.js dosyasını doğru kaydettiğinizden emin olun, kullandığınız editör birşeyleri bozmuş olabilir
* dosya isimleri ve path hatası var mı kontrol edin.

orhan, Pzt, 24/05/2010 - 23:28 tarihinde.

tekrar baştan deneyince oldu Aydos. çok güzel bir yöntemmiş aslında basit de. teşekkür ederim. bir şey sorucam, cufon kullanımı sistemi yavaşlatır mı ya dadezavantajları nelerdir?

orhan, Sal, 25/05/2010 - 00:16 tarihinde.

bir de şu var

aydos, Sal, 25/05/2010 - 01:12 tarihinde.

google fonts da güzelmiş :)

* cufon sistemi yavaşlatır: kullandığınız font javascript yükü getirir (.js dosyası zaten) bu yüzden mümkün mertebe küçük dosya oluşturmak lazım.
* tarayıcı ayarlarında javascript'i kapatanlar normal görürler, font'un gözükmesi için javascript çalışmalı
* yazıdan resim yaptığı için biraz işlemci/hafıza kaynağı harcar, ayrıca sayfanın kodu da artıyor.

* google fonts'un iyi yanı resim yapmaması, normal css ayarları yapabilmeniz, yani yukarıda sayılan maddeler bunda geçerli değil
* kötü tarafı her font bulunmuyor
* bir de acaba Türkçe karakterleri destekliyor mu? kontrol etmek lazım...

aydos, Sal, 25/05/2010 - 01:19 tarihinde.

google fonts'un çalışma şekli inceleyip benzer şekilde kendi ttf fontunuzu sitenize ekleyebilirsiniz.

bir de, sanırım google fonts da bir ttf dosyası kadar yük bindiriyor. ama javascript ile font yüklemeye tercih ederim. performans karşılaştırması yapmak lazım...

aydos, Sal, 25/05/2010 - 01:20 tarihinde.

derse ek:
http://www.dafont.com/ sitesinde ücretsiz yazı tipleri var bazıları Türkçe destekliyor

orhan, Sal, 25/05/2010 - 01:22 tarihinde.

google fonts türkçe karakter desteklemiyor sanırım. dafont.com süper bir kaynak. türkçe için de fonttr.com var gayet güzel.

veli, Sal, 03/08/2010 - 09:29 tarihinde.

Merhaba,

Çok teşekkürler, güzel bir anlatım olmuş. Ancak IE7'de cufon sayfa yüklendikten sonra çalışıyor ve yazılar sayfa yüklendikten sonra ilgili font'a dönüşüyor. Bunun bir çözümü var mıdır? http://wiki.github.com/sorccu/cufon/usage adresinde body'i kapatmadan önce Cufon.now();
yazın demiş ama yine de düzelmedi.

Teşekkürler.

aydos, Pzr, 08/08/2010 - 11:39 tarihinde.

cufon uygulanabilmesi için yazının yüklenmesi lazım, bu durumda pek yapılabilecek birşey yok gibi duruyor. ya da cache benzeri bir yapı kurarak sayfa yüklenirken cufon edilmiş resimleri yüklemesi - yani sayfadaki yazıların cufonlanmış halinin tutulması ve bunların yüklenmesi- sağlanabilir, bayağı uçuk bir fikir oldu bu :)

Ziyaretçi (?), Çrş, 29/09/2010 - 00:07 tarihinde.

fontların otomatik olarak cufon dosyasını indirmek için cufon font kütüphanesini kullanabilirsiniz http://www.cufonfonts.com/tr

Domain Usta, Cuma, 01/10/2010 - 22:45 tarihinde.

Kullandığım bir yöntem ve gerçekten güzel sonuçlar alınıyor görsel olarak...

Ders için teşekkür ederim, bu ders ile oldukça kolay bir şekilde yapabiliyorum bu işi...

Tangun (?), Sal, 19/04/2011 - 03:04 tarihinde.

Merhaba;
Bu konuda ufak bir sorun var,

info'ya eklediğim satırlar
scripts[] = calistir.js
scripts[] = cufon-yui.js
scripts[] = type1living_400-type1living_700-type1living_oblique_400.font.js
(seçtiğim domain wildcard lı *.domain.com)

calistir.js
Drupal.behaviors.myCufon = function(context) {
Cufon.registerFont('h2');
Cufon.registerFont('#content h3');
Cufon.registerFont('#content');
}

şeklinde tüm content'i değiştirsin de rahat göreyim diye..(Cufon.registerFont değiştirmedim aynen default olarak verdiği gibi replace olarak da denedim yine olmuyor...)

ama nafile.. aynen olduğu gibi. nerede yanlış yapıyorum?