Google Fonts Nedir? Nasıl kullanılır?

Websitesi tasarlarken okunabilirliği ve yazıların düzeni önemli konulardan biridir, çok güzel tasarlanmış ama yazılarının zor okunduğu bir proje (eğer müzik yada video sitesi değilse) başarıya ulaşamamış bir projedir.

Bu yüzden her geçen gün Typografi ye daha da önem verilmeye başlanmıştır. Font seçiminin zor olması ve ziyaretçinin bilgisayarında sizin seçtiğiniz font un bulunmaması, tasarımınız için eksi birer puandır. Bu nedenle Google bize bir çare sunuyor.

Google Fonts API nedir?

Google Font API, web sayfanızda farklı yazı tipleri kullanmanız için size yardımcı olan bir sistemdir. Tarayıcılar arası farklılık göstermeyen, farklı tarayıcıların da desteklediği Google Font API, kolay kullanımı yüzünden de tercih sebebidir. Google Web Fonts, sistem fontu olmayan fontların web sayfalarında image olarak değil de normal text olarak kullanılabilmesi için geliştirilmiş bir uygulamadır.

Google Web Font Nasıl Kullanılır ?

www.google.com/webfonts a tıklayarak, Google web fonts a ulaşırız. Burada birbirinden farklı font tipleri bulunmaktadır ve biz bunlardan istediğimizi seçebiliriz. Son dönemde Font’ları image’a çeviren bir sistem bulundu ve bu tip işler için Font’lar yerine bu image dosyaları kullanılmaya başlandı. Bu diğer sistem yerine Web Font’un kullanılmasının en önemli sebebi, Arama motoru optimizasyonudur. Eğer yazı başlıklarınız image (resim) dosyası olursa, arama motoru bu içeriği anlamaz ve herhangi bir resimmiş gibi geçer ve bu sitemizin sıralamasını düşürür. Bunun dışında bir image dosyası font’tan daha yavaş yüklenecektir. Bu da site trafiği için bir eksi daha demektir. Bu kısmı kısa keserek asıl sorumuza gelelim.

Google Web Font’u sitemizde nasıl kullanırız?

Yukarıdaki linkten ilgili siteye girdik. Daha sonra ekrana gelen fontlar arasından seçim yaparak ‘Add to Collection‘ a tıklayalım.

Sayfanın altında mavi bölüm açılmış olmalı, burada sağ taraftaki Use‘a tıklayın.

Açılan bölümde yazı tipinin biçimini belirliyoruz (koyu, italik gibi) ve aşağıya doğru bize lazım olan kodu görüyoruz.

Bu kısma geçmeden önce sayfanın sağ tarafında duran ve üzerinde PageLoad yazan ibrenin ne olduğunu açıklayalım, bu ibre bu font’u kullanığınız taktirde sayfanızın yüklenme süresinin ne kadar gecikeceğini göstermek içindir.

Aşağıya geçtiğimizde benzer bir görüntüyle karşılaşıyoruz.

Burada 3 farklı kod tipi bulunmakta; Standart, Import ve Javascript , bunlardan birini websitemizin <head>…</head> etiketleri arasına koyduğumuzda ilgili font’u CSS dosyamızda kullanabiliriz. Örneğin ben Denk One font’unu seçtim ve ekledim. CSS dosyamdaki font-family alanına aşağıdaki gibi yazmalıyım;


font-family: 'Denk One', sans-serif;

Bu yazımızda Google Fonts’un ne olduğunu ve nasıl kullanılması gerektiğini öğrendik, sanırım verilmemiş bir bilgi kaldı.

Google Web Fonts destekleyen Tarayıcılar

  • Google Chrome: 4.249.4 üstü
  • Mozilla Firefox: 3.5 üstü
  • Apple Safari: 3.1 üstü
  • Opera: 10.5 üstü
  • Microsoft Internet Explorer: 6.0 üstü

Mobil aygıtlar olarakta;

  • Android 2.2 üstü
  • iPhone 4.2 üstü

Görüşmek üzere Sağlıcakla kalın.

DAHA FAZLA İÇERİK

Uçan Dev Uçak Maketi A-380 Uçan Dev Uçak Maketi A-380

22 Ocak 2015, Perşembe

GTA V Hala Çıkışta GTA V Hala Çıkışta

12 Şubat 2016, Cuma

SİZDE YORUM YAPIN

2014’ün En İyi 16 Oyunu

2014’ün En İyi 16 Oyunu 23 Aralık 2014, Salı

Just Cause 3 Bomba gibi geliyor

Just Cause 3 Bomba gibi geliyor 16 Aralık 2014, Salı

GTA V Hala Çıkışta

GTA V Hala Çıkışta 12 Şubat 2016, Cuma

Playstation 4’te Kırıldı

Playstation 4’te Kırıldı 18 Mayıs 2015, Pazartesi