Site tasarımı yaparken artık kendiliğinden (default) olan yazı tüpleri (font) pek tercih edilmiyor. Daha güzel duran daha uygun fontları kullanmak görsel açıdan daha uygun bulunuyor. Ancak bu yapılan tasarımları html haline getirirken aynı yazı tiplerinin kullanımı sıkıntı yaratabiliyor. Bunun için istenen fontu html içerisinde kullanılmasını sağlayan bir çok yöntem mevcut. Bunlardan bazıları:
- Sifr - Eski bir yöntem, artık pek tercih edilmiyor. Yazı indekslemesi sorunlu.
- Cufon - Yazıların canvas ile çizdirilmesini sağlıyor. Farklı bir katman olarak cufon etiketi dahilinde yazıları yer alıyor.
- Font Squirrel - Yazıların font içeriğini siz sağlıyorsunuz ve istediğiniz fontu web font gibi kullanabiliyorsunuz .
Ben bu yazıda Font Squirrel sitesinin sağladı hizmeti anlatacağım, en kullanışlısı da o görünüyor zaten.
Font Squirrel
Sitede font dosyaları üreten "font-face generator" gayet basit çalışıyor. İstediğiniz yazı tipinin (font) ".ttf", ".otf" uzantılı dosyasını yüklüyorsunuz ve size web site dahilinde kullanmanız gereken yazı tipi dosyalarını ve çağırmanız gereken css kodunu veriyor.
Font Face Generator
İstediğiniz yazı tipinin dosyalarını üretmek için:
- Menüden @font-face Generator sayfasına girin.
- "Add Fonts" butonu ile istediğiniz fontun dosyasını ekleyin.
- Herhangi bir ekstra değişiklik yapmanız gerekmiyorsa seçenekleri "OPTIMAL" da bırakın.
- Eğer türkçe karakter, boyut gibi sorunlarınız olursa seçeneği "EXPERT" yapın.
- Sorun var ve karakterler ise dil listesinden türkçe ekleyin Latin harfleri listesinde Extended ları da ekleyin. Bu işlemleri altta bulunan karakter listesinden karakterleri görerek teyit edebilirsiniz.
- Sorun var ve başka bir şey ise Expert durumunda boyut, oran, uzaklık gibi neredeyse her durum ile ilgili seçenek mevcut.
- Daha sonra "Agreement" panelinde "Yes, the fonts I'm uploading are legally eligible for web embedding." yazan kutuyu işaretleyin.
- Sağ alt kısıma "Download" butonu gelecektir. Buradan dosyalarınızı indirebilirsiniz.
Eğer eklediğiniz yazı tipi dosyası kullanımı ücretsiz değil ya da font squirrel tarafından yasaklanmış ise size bunu belirten bir pencere gelecektir ve o fontu kullanamazsınız.
Font Face Kit
Bunun dışında sitede bu şekilde hazırlanmış ücretsiz onlarca yazı tipi de mevcut. Bunlara da menüden "@font-face Kits" kısmını açarak ulaşabiliyorsunuz. Bu kitlerin her birinin üstünde şöyle bir şey mevcut:
Dearest | 3 FontsView Font | View @ff Demo | Get Kit
Burada "Get Kit" diyerek hazırlanmış dosyaları indirebilrisiniz.
Ücretsiz Yazı Tipleri
Site aynı zamanda ücretsiz onlarca yazı tipi sunuyor. Bunlara da ana sayfa dahil olmak üzere, menüden "Popular" ve "Recent" linkleriyle de ulaşabilirsiniz. Bunları indirmek için sağ altlarında yazan "Download Otf" ya da "Download Ttf" linklerine tıklamanız yeterli.
İsterseniz tabii ki bu yazı tiplerini de yukarıda anlattığım font-face generator ile tek tek de site içerisinde kullanılıcak hale dönüştürebilriisiniz.
Sitede Font Face Kullanmak
Yazı tiplerini (font) site içerisinde kullanılıcak hale getirdikten sonra aslında gerisi daha kolay. İndirdiğiniz bu zip dosyasını sitenizin tercihen "css" klasörüne çıkartın ya da ana dizine çıkartın, bu tamamen sizin insiyatifinizde. Bu çıkartma dahilinde olması gereken dosyalar:
- Font isminde .svg uzantılı bir dosya.
- Font isminde .woff uzantılı bir dosya.
- Font isminde .eot uzantılı bir dosya.
- Font isminde .ttf uzantıı bir dosya.
- Demo html sayfası.
- Lisans yazısı dosyası.
- stylesheet adıyla stili içeren bir dosya.
Site içerisinde bu yazı tipini kullanırken. Font ismindeki dosyaların stil dosyası ile aynı klasör dahilinde olmasına dikkat edin.
Site html sinde stylesheet dosyasını stil dosyanızda önce çağırın. İsterseniz zip ten çıkan stylesheet dosyasındaki içeriği alıp kendi stil dosyanıza koyarak da kullanabilirsiniz.
<head>
<link href="/css/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="/css/stil.css" rel="stylesheet" type="text/css" />
</head>
Stylesheet dosyası içindeki css kodları şuna benzemektedir.
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on October 21, 2011 07:00:21 AM America/New_York */@font-face {font-family: 'DeutschGothicNormal';src: url('Deutsch-webfont.eot');src: url('Deutsch-webfont.eot?#iefix') format('embedded-opentype'),url('Deutsch-webfont.woff') format('woff'),url('Deutsch-webfont.ttf') format('truetype'),url('Deutsch-webfont.svg#DeutschGothicNormal') format('svg');font-weight: normal;font-style: normal;}
Bu dosyadaki, o yazı tipi için belirlenmiş adı, fonta sahip olmasını istediğiniz öğelerin stillerine yerleştirin. Mesela yukarıdaki örnekte yazi tipi ismi 'DeutschGothicNormal' olarak belirlendiği için şu şekilde çağırılabilinir:
h2{font-family: 'DeutschGothicNormal', Sans-Serif; font-size:20px; float:left;}
Artık belirlediğiniz html öğeleri, istediğiniz yazı tipi ile gözükecektir.