@font-face nedir? nasıl kullanılır ?

Cufon’un ie9 sürümlerindeki ufak bir hatası ve yaptığım sitelere harici bir js dosyası eklememek için(cufon insanı kısıtlıyor, huzursuz ediyor) üzerimdeki @font-face olan ön yargılarını yıktım.  Artık font-face kullanmaya başladım.

@font-face nedir ?

@font-face  web sitemizin yayınlandığı işletim sistemlerinde olmayan fontları o bilgisayarlara yükler. Yani özgürce web sitemizde font kullanabilir ve bu font’ları her bilgisayarda sorunsuz gösterebiliriz.

‘Aycan bu üsteki cümleden hiç birşey anlamadım çok kısa ‘ diyorsanız sizi buraya alalım.

@font-face’i tarayıcılar destekliyor mu ?

Evet destekliyor.

@font-face’i kullanmak için neler gerekiyor ?

Font dosyamızın ttf uzantılı font dosyası font-face yapmamıza yetiyor.

@font-face yapmak için 3 yol vadır, bunlardan birisi (en kolay yolu)  fontsquirrel, onlinefontconverter / kirsle en son olarakta google webfonts.

Şimdi 1. yoldan font-face yapmaya başlıyoruz. Çalışma yapacağımız fontun adı : “HelveticaBd”.

fontsquirrel buraya tıklıyoruz ve karşımıza aşağıdaki gibi bir ekran geliyor.

Buradan add fonts butonuna tıklıyor ve bilgisayarımızdaki ttf uzantılı font dosyasını seçiyoruz.

Önemli :  Eğer karşımıza “Monotype has requested that their font “SEÇTİĞİNİZ FONTUN ADI” be blacklisted by the Generator. You will not be able to convert this font.” böyle bir uyarı geliyorsa direk 2. font-face yapma adıma atlayın.

Font dosyasını yukledikten sonra  “BASIC,OPTIMAL,EXPERT” seçeneklerinden EXPERT’i seçiyoruz ve aşağıya bir kutucuk açılıyor. Buradan  Subsetting kısmından Custom Subsetting… kısmını seçiyoruz ve alta yeni bir kutucuk açılıyor. Buradan Language: kısmından Turkish seçeneğini seçiyoruz.

Sonra en alttan Agreement kısmındaki ” Yes, the fonts I’m uploading are legally eligible for web embedding. ” seçeneğini seçiyoruz ve Download your kit butonuna tıklıyoruz. Fontsquirrel bize hemen @font-face yapılmış haliyle font dosyamızı veriyor ve bize sadece bu css kodlarını siteye entegre etmek kalıyor.

Üstte de belirttiğim gibi eğer font-face yapacağımız font, fontsquirrel de kara listeye düştüyse kolları sıvıyoruz.

İlk adım olarak  onlinefontconverter.com adresine uye oluyoruz ve giriş yapıyoruz.

Select fonts’a tıklayıp  ttf uzantılı fontumuzu seçiyoruz ve aşağıdaki resimdeki gibi bir ekran geliyor karşımıza

Buradan işimize yarayacak uzantıların üstüne tıklıyoruz ve tıkladığımız uzantılar formatında alt tarafa fontlarımız geliyor.

Buradan convert edilen fontların üstüne tıklayarak bütün fontları tek tek inidirip bir klasorde topluyoruz.

Not : EOT uzantılı fontu yukarıda belirtiğim kirsle adresinden çevireceğiz. Buraya tıklıyoruz  TTF uzantılı fontumuzu upload edip convert tuşuna basıyoruz ve aşağıdaki gibi bir görüntü karşımıza geliyor.

Download butonuna tıklayıp eot uznatılı fontumuzu indiriyoruz.

ve hemen bir css dosyası oluşturuyoruz. Css dosyamızda aşağıdaki gibi tasarlıyoruz.

Fontumuzun  adını YeniFontumuz diye adlandırıyorum

Tüm İşlemler bu kadar arkadaşlar. İe7,ie8,e9,firefox,chrome,safari de denedim ve çalışıyor.

3. Yöntem Google Webfonts

Arkadaşlar bu yöntem fontsquirel’den bile kolay bir yöntem ama tek sıkıntısı Türkçe destekli fontlar bulmak.

http://www.google.com/webfonts adresine giriyoruz Burada isteiğimiz bir fontu üzerindeki “Quick-Use” butonuna tıklıyoruz

Açılan sayfa “3. Add this code to your website:” yazısnın altındaki <link> tagını sitemizdeki head tagları arasına yapıştırıyoruz.

[html]<link href=’http://fonts.googleapis.com/css?family=Jolly+Lodger’ rel=’stylesheet’ type=’text/css’>[/html]

Şimdi ise tek yapmamız gereken kullanmak istediğimiz elemente “font-family:Jolly Lodger” değerini vermek.
İşlem bu kadardır arkadaşlar, esen kalın…