Tasarımlarınız’da Özel Yazı Tipleri Kullanabilmeniz İçin Bazı Seçenekler

Sizlere Yazı Font’larımıza Nasıl Türkçe Öğretmemiz gerektiği hakkında bilgi vermiştik.  Şimdi ise yazı font’larımızı nasıl web sitelerimizde nasıl kullanabileceğimiz hakkında bilgiler vermek istiyorum. Aslına bakarsanız bunun bir çok yolu var ben sizler için kullanımı en kolay ve pratik olanları (Google Font API, Cofon, @FontFace) hazırlamak istedim, birlikte uygulamaları yaparak artı ve eksilerini inceleyelim.

Google Font API Nedir ?

Google Font API adından da kolaylıkla anlayabileceğimiz gibi, Google tarafından uyarlanmış bir yazı tipi kütüphanesi diyebiliriz.  Google font dizinde barındırılan yazı tiplerini Google Font API aracılığı ile web sayfalarımızda kullanabilmemiz için düzenlenmiş ücretsiz yazı fontlarını barındırmakta ve bizlerin kullanımına ücretsiz olarak sunmaktadır.

İnternet sayfalarımızda farklı yazı tiplerini kolaylıkla kullanmamıza yardımcı olur.  Aslında ilk baktığımız’da kulağa hoş geliyor, fakat Türkiye’de ki kullanıcıların hepsi aynı şeyi düşünmüyor çünkü yazı tiplerinin bir çoğu Türkçe karakter içermediği için Türk tasarımcıları bu olaydan kötü etkileniyor. Tarayıcı bazında baktığımız zaman ise tarayıcılar arası küçük farklılıklar olabiliyor ama iyi bir tasarımcı iseniz bunun üstesinden gelmeniz mümkün her yazı fontu için olmasa da gerçekten işimizi gerçekten kolaylaştırıyor.

Şimdi bir bir Google Font API nasıl kullanılıyor şimdi isterseniz onu ele alalım.

İlk olarak,  http://www.google.com/fonts sayfasını ziyaret ediyoruz. Daha sonra, ben Türkçe bir sayfada kullanacağımızı göz önünde bulundurarak, Preview Text ‘in karşılığına

• Aa Bb Cc Çç Dd Ee Ff Gg Ğğ Hh Iı İi Jj Kk Ll Mm Nn Oo Öö Pp Rr Ss Şş Tt Uu Üü Vv Yy Zz 1234567890

Türkçe alfabe olarak belirledim ve gerekli görüntüleme ayarları yaptım (boyutu vb.) şimdi gelelim hangi yazı tipleri bizim için uygun olarak hangisini kullanabiliriz.

Yukarıda da görebileceğimiz gibi bizim için en uygun olan yazı fontu Ribeye hiç zaman kaybetmeden direk olarak Quick-use butonuna tıklıyorum. Karşıma çıkan ilk sayfada  ”1.Choose the styles you want”  İstediğimiz sitilleri seçmemizi söylüyor, stil’lerimizi belirledik – “2.Choose the character sets you want” İstediğimiz karakter setlerini seçmemizi istiyor, “Add this code to your website” kodu veb sitemize eklememizi istiyor. Bunu Standart Css, @import veya js Script ile yapabiliriz ve son olarak “Integrate the fonts into your CSS” Kullanmak istediğimiz yazı içerisine entegre edelim. Kullanımı oldukça basit olduğundan kod yapısını paylaşmaya gerek duymadım.

Cofon Nedir  ?

Cufon belli bir java script desteği ile çalışan istediğimiz herhangi bir yazı tipini "Türkçe yazı karakterleri dahil" web sitelerimizde kullanmamıza olanak sağlar. Tüm tarayıcılarda hiç bir sorun teşkil etmeden çalışır ve ayrıca kalite düzeyi yeniden yapılandırılarak kendisinden başka hiç bir şeye ihtiyaç duymaz.

Bana göre tek kötü özelliği yazı fontlarını internet sitemizde .PNG formatında göstermesi ve bu da yazının kopyalanmasını imkansız bir hale getirir, fakat yinede kullanabileceğimiz başlıklar için mükemmel bir çözüm olabilir.

 Cufon'un nasıl kullanıldığını ele alacak olursak:

cufon.shoqolate.com/generate  resmi sitesini ziyaret edelim. Yazı tipimizi kayıt edebileceğimiz ve çeşitli ayarları yapabileceğimiz bir panel ile karşılaşacağız. İlk karşımıza çıkan Regular typeface, Bold typeface (optional), talic typeface (optional), Bold Italic typeface (optional)  yazı tipimizi hangi özelliğe göre yüklemek istediğimizi soran bir seçenek seçimimizi yaptıktan sonra, The RULEs of these fonts allow Web Embedding (without Adobe Flash) adobe flash olmadan web kurallarına gömülmesi için izin vermemiz gerekiyor daha sonraki aşama, include the following glyphs (if alailable) varsa glifleri dahil etmemizi isteyen bir seçenek göreceğiz burada ALL hepsini işaretleyerek ...and also these single characte ve aynı zamanda kendimizin de karakter ekleye bileceğimizi söylüyor, eğer yazı tipimiz Türkçe karakter içermiyor ise bu seçeneği kullanıp Türkçe karakterlerimizi girmeliyiz. (Daha derinlemesine ayarlar kesinlikle yapabilirsiniz) En son olarak I acknowledge and accept these terms kullanım şartlarını kabul ederek yükleme işlemimize başlayabiliriz.

Ben Harabara.ttf isimli ücretsiz bir font seçmiştim ve yükleme işlemini gerçekleştirdiğimde bana Harabara_700.font.js isimli içerisinde benim yazı tipimi java script dosyası  olarak sundu.  Şimdi hızlıca klasör yapımı oluştura bilirim. /Cufon/js/ isimli klasörüme bana vermiş olduğu Harabara_700.font.js dosyamı atıyorum.  Şimdi dahil etmem gereken bir dosya daha var tekrardan cufon.shoqolate.com sitesine girip Download sekmesini tıklayarak cufon'un çalışması için bize verdiği özel JavaSvript kodunu da dahil ediyorum. /Cufon/js/

Şimdi isterseniz kod yapıları üzerinden örnekler ile gidelim. Cufon için oluşturduğumuz JavaScript dosyamız ve JavaScript yazı tipimiz.

1

<script type="text/javascript" src="js/cufon_1.09i.js"></script><script type="text/javascript" src="js/Harabara_700.font.js"></script>

Peki şimdi cufon'u nasıl dahil edeceğiz? Bunun için çok kısa bir kod yazmamız yeterli olacaktır aşşağıda bulunan örneği inceleyebilirsiniz.

1
2
3

<script type="text/javascript">// <![CDATA[
Cufon.replace ('h1');
// ]]></script>

Kod yapısını incelediğinizde ben başlık etiketlerinin hepsine cufon uygulamış oluyorum, peki ben başlıklarıma :hover özelliği vermek istersem sizce çalışacak mıdır? Tabi ki de çalışmayacak, bu  bir sorun gibi gözükse de aslında sorun değildir hemen kodumuzda bir düzenleme yapıyor ve :hover özelliğinin aktif olmasını sağlıyoruz.

1

Cufon.replace ( 'h1','p','a', {hover:'true'});

Şu anda hover özelliğimiz sorunsuzca çalışacak ve ayrıca örnek olması açısından diğer html etiketlerine nasıl hükmede bileceğimizi de uyguladım yukarıda ki örnekten kolaylıkla anlayabilirsiniz.

SONUÇ :

@FontFace  Nedir ?

@FontFace Css2 teknolojisi  ile birlikte gelen fakat Css2'nin güncellenen sürümü Css2.1 ile birtakım sorunlar yaşanması ile rafa kaldırılan ardından Css3 sürümü ile tekrardan kullanımımıza olanak sağlanmıştır. Peki, @FontFace işleyişi nasıl gerçekleşir?  Kullanıcılarımızın sistemlerinde yüklü olmayan yazı tiplerini belleğe yükleyip (cache-keş belleğine) kullanma ve görüntüleme imkanı sağlar.

Bütün modern tarayıcıları desteklese de tam verimli kullanabilmemiz için dört dosya haline getirmemiz gerekiyor (TTF - EOT - WOFF- SWG) bu formatları nasıl oluşturacağım der dediğinizi duyar gibiyim, aslında ilk olarak bakıldığın da zor gibi gözükse de bunu bizim için ücretsiz olarak çeviren siteler mevcut şimdi dilerseniz Türkçe desteği de bulunan en popüler Font Face Generator sitesini sizlerle paylaşıp nasıl bir yazı fontunu bize lazım olan formatlara çevirebileceğimizi inceleyelim.

İlk olarak yapmamız gereken fontsquirrel.com sitesine giriş yaparak web font generator 'ümüze ulaşıyoruz, dilerseniz nasıl yüklememiz gerektiğini örnek resim dosyası üzerinden inceleyelim.

Küçük bir hatırlatma kullandığımız yazı fontu ücretsiz ise çevirme işlemini yapacaktır.

@FontFace Dosyalarımızı Nasıl Elde Ederiz ve Kullanabiliriz.

Basitçe @FontFace kit 'imizi oluşturduk, şimdi ise yüklediğimiz XXX.rar dosyamızın içerisinden bize lazım olan dosyaları alalım. Öncelikle dizin yapımızı oluşturalım /FontFace/yazitipleri/ dizin içerisine  "TTF - EOT - WOFF- SWG'"  dosyalarını dahil edelim, /FontFace/css/  dizin içerisine "stylesheet.css" dosyamızı dahil edelim. Burada öncelikle yapmamız gereken ayar stylesheet.css dosyamız da bulunan css kodlarımıza yazı tipleri yolunu gösterelim.

1
2
3
4
5
6
7
8
9
10

@font-face {
    font-family: 'harabarabold';
    src: url('../yazitipleri/harabara-webfont.eot');
    src: url('../yazitipleri/harabara-webfont.eot?#iefix') format('embedded-opentype'),
         url('../yazitipleri/harabara-webfont.woff') format('woff'),
         url('../yazitipleri/harabara-webfont.ttf') format('truetype'),
         url('../yazitipleri/harabara-webfont.svg#harabarabold') format('svg');
    font-weight: normal;
    font-style: normal;
}

Uygulamamız gereken ayar bu kadar doğru yolu gösterdiğinizden emin olun. Şimdi index.html dosyamızı oluşturup içerisine css'imizi çağıralım.

1

	<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />

Bu özel yazı tipini nerede kullanmak istiyor isek örnekteki gibi uygulayarak kullanalım.

1

    font-family: 'harabarabold';

Hepsi bu kadar ben bu 3 uygulama arasında bir seçim yapacak olsaydım kesinlikle Css3 ile tekrardan hayatımıza giren @FontFace özelliğini kullanırdım hepsini inceleyerek kendiniz için en uygun olan seçimi yapabilirsiniz. Eğer zaten bunları biliyor ve bunlardan birini kullanıyorsanız değerli yorumlarınız işe karşılaştığınız zorlukları veya düşüncelerinizi yorum olarak belirtirseniz üzerinde konuşmak isterim.

Bol Şanslar!