Google’dan font-face hizmeti: Google Font API

20 May 2010 tarihinde eklendi. Blog | 0 yorum

Google yine yaptı yapacağını ve web tasarım dünyasında son zamanlarda çok moda olan font-face kullanımına özel hizmetini, Google Font API adı ile hayata geçirdi.  Şahsen beni oldukça sevindirdi bu gelişme. Benim kadar bir çok web tasarımcının da hoşuna gideceğine eminim. Bu hizmet sadece font-face‘den mi oluşuyor diye merak edenlere cevabım “evet, sadece font-face özelliği ile sitenize sistem fontlarının haricinde çok daha güzel fontlar yüklemenizi sağlıyor” olacaktır.

Kullanımı da çok basit

Bu hizmetin yanında gelen Google Font Directory‘den bir yazı tipi seçtiğinizde, Google size bir CSS linki veriyor. Bu linki sitenizin html yapısına ekleyip, fontun adını da nerede kullanmak istiyorsanız o bölümün CSS’ine ekleyerek kullanabiliyorsunuz.

Google’ın linkini verdiği CSS dosyasında bulunan kodlar sadece aşağıdaki satırlardan ibaret.

@font-face {
  font-family: 'Fontun Adı';
  font-style: normal;
  font-weight: normal;
  src: local('Fontun Adı'), url('http://themes.googleusercontent.com/font?kit=X-CahsKZZcJfSyZ_tX4ptg') format('truetype');
}

Aşağıdaki gibi fontu kullanmak istediğiniz bölümün font-family özelliğine fontun adını yazmanız yeterli. h1 ve h2′yi örnek olarak yazdım.

h1, h2{
  font-family: 'Fontun Adı', serif;
}

Peki “ben zaten CSS dosyama @font-face’i ekliyorum ve sitede sorunsuz görünüyor. Google’dakinin farkı ne?” diye soracak olursanız ona da cevabım hazır : ) Bu soruya cevap olarak, Google Font API’yi kullanmanın avantajlarını sıralayabiliriz.

Google Font API’nin Avantajları

+ Bant Genişliği: Google, font dosyalarını kendi bünyesinde bulundurarak, her defasında yüklenen fontların kendi sunucumuzun bant genişliğini artırmasını önlemiş oluyor.

+ Yükleme Hızı: Bildiğiniz üzere @font-face’le eklenen fontların tarayıcıda yüklenmesi zaman alıyor. Google sunucuları bu noktada hızlarını konuşturarak, fontların normalden daha hızlı yüklenmesini sağlamış oluyorlar.

+ Önbellek Sorunu: Aynı font dosyası birden fazla sitede kullanıldığında tarayıcıda önbellek (cache) problemi görülebiliyor. Google hizmetinde bunun kesinlikle olmadığı iddia ediliyor.

Ajax Libraries adı ile Jquery, Mootools gibi Javascript kütüphanelerini de kendi bünyesinde bulundurarak aynı tarz bir hizmet sunan Google, yazılımcılardan sonra bu defa da biz tasarımcıların yüzünü güldürmeyi planlıyor anlaşılan. Eğer bu hizmeti uygulamalı olarak test etmek isterseniz bu örneğe göz atabilirsiniz.

Ayrıca font directory’deki fontların tarayıcıda nasıl göründüklerine preview sayfasından bakabilirsiniz. Türkçe karakterleri destekleyen fontların Google’dan kullanılabilmesi için nasıl bir gelişme olacak, ilerleyen zamanlarda hep birlikte göreceğiz.