Daha önce "Typeface ile Web Sayfalarında Özel Font Kullanımı" başlıklı yazımda, bir web sayfasında özel font kullanabilmek için yapılması gereken bir kaç işlemden bahsetmiştim. Google Web Fonts API ile bu işlem şimdiye kadar denemiş olduğum tüm opsiyonlar arasında en kolayı gözüküyor.
Hiçbir kod yazmanıza gerek kalmadan, ekstra bir dosya yüklemenize gerek kalmadan şu an 271 font arasından seçim yaparak istediğiniz fontu web sayfanızda kullanabilirsiniz.
Kullanımı
- Google Web Fonts 'a girip web sayfanızda kullanmak istediğiniz fontunuzu seçiyorsunuz. Ben test için içinde Türkçe karakterler bulunan "Ubuntu Condensed" fontunu seçtim.
- Fontun hemen yanında bulunan Quick-use butonuna tıklayarak fontu sayfamıza nasıl ekleyebileceğimizi gösteren bir bölümle karşılaşıyoruz. Türkçe karakter kullanmak istiyorsak "Choose the character sets you want" bölümünün altında bulunan Latin Extended (latin-ext) kutusunu işaretliyoruz.
- Ve stilimiz hazır. Farklı opsiyonlar şeklinde bize stil dosyasının linki veriliyor. Ben test için standart link tagını kullandım. (Internet Explorer'da fontların önce yüklenmesi için bu link tagını head'in ilk elemanı yapmanız öneriliyor)
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
-
Örnek Kod;
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style type="text/css">
p { font-family: 'Ubuntu Condensed', sans-serif; }
</style>
</head>
<body>
<p>arunes.com Google Fonts Testi</p>
</body>
</html>
Web sayfalarında istediğimiz fontu kullanabilmek için çeşitli yöntemler mevcut, ancak birçoğu zahmetli ve zor uygulanabilir çözümler. Bu konuyla ilgili uğraşmış ve yorucu çözümlerin yerine yeni bir çözüm bulan arkadaşım superkahraman bana typeface'den bahsetti. Bende bu yazımda kullanımı kolay, server side kod gerektirmeyen typeface ile istediğimiz yazı tipini websayfamızda nasıl kullanacağımızı anlatacağım.
- Öncelikle buradan typeface'in son versiyonunu indirelim.
- Sonra bu sayfaya girerek web sitemizde kullanmak istediğimiz fontu upload edelim.
Fontumuzu seçip Convert Font butonuna basıyoruz.
-
Fontumuzu yükledikten sonra karşımıza aşağıdaki gibi bir ekran geliyor, bu ekrandan kullanmak istediğimiz karakter set(ler)ini seçiyoruz.
Benim örnek yüklediğim font olan Eden Mills'de Türkçe karakterler Latin Extended-A bölümündeydi, büyük ihtimalle diğer fontlar içinde aynısı geçerli ancak başka font ile denemedim.
Karakter set(ler)ini seçtikten sonra Download Font butonuna basarak fontumuz için oluşturulan javascript dosyasını indiriyoruz. İnen dosyanın dosya uzantısı js.htm olarak geliyor bunu js yapmanız gerekecek.
- Sonra fontumuzu kullanacağımız sayfaya typeface javascriptini ve fontumuzu çevirdiğimizde oluşan font javascript dosyasını include edeceğiz.
Burda önemli bir nokta dışarıdan yüklediğiniz diğer css dosyalarınızı typeface'i include etmeden önce kullanmanız gerekiyor. Eğer bu şekilde yapmazsanız Firefox 3 ile görüntülenmede problem yaşarsınız.
- Artık stilimizde font-family tagını fontumuzla beraber kullanabiliriz.
arunes, deneme...
typeface 0.15
