Google Fonts kütüphanesiyle nasıl çalışılır

Google Fonts, açık lisanslı 1500'den fazla yazı tipi ailesi içeren ücretsiz bir kütüphanedir. Bir yazı tipini hızlıca eklemek için fonts.google.com sitesinde istediğiniz kalınlığı seçin, sağlanan <link> kodunu kopyalayın ve HTML belgenizin <head> bölümüne yapıştırın; ardından CSS'de font-family özelliğini uygulayın. Google Docs belgeleri için ek yazı tipleri "Yazı Tipleri" → "Diğer yazı tipleri" menüsü üzerinden eklenir.

Aşağıda, yazı tiplerinin doğru şekilde nasıl seçileceği, düzenleme sırasında hatalardan nasıl kaçınılacağı ve sayfa yüklemelerinin nasıl hızlandırılabileceği detaylıca ele alınacaktır.

Uygun yazı tipini nasıl seçersiniz

Seçimdeki en önemli kriter okunabilirlik ve dil desteğidir. Google Fonts arayüzünde mutlaka Language (Dil) filtresini kullanın ve siteniz Rusça ise Cyrillic (veya Cyrillic Extended) seçeneğini işaretleyin. Bu filtreyi kullanmazsanız, Kiril alfabesi karakterlerini göstermeyen güzel görünümlü bir yazı tipi seçme riskiyle karşı karşıya kalırsınız.

Temel yazı tipi kategorileri

Kombinasyon kuralları

1. En fazla 2–3 aile. Çok çeşitli yazı tipleri görsel gürültü yaratır ve sitenin yüklenme hızını yavaşlatır.
2. Zıtlık çiftleri. Metin için ciddi bir grotesk + başlıklar için ifade gücü yüksek bir antikva (veya tam tersi) kombinasyonları iyi sonuç verir.
3. Kalınlıkların kontrolü. Seçtiğiniz yazı tipinde gerekli kalınlıkların bulunduğundan emin olun:
   • Regular (400) — ana metin için.
   • Medium (500) veya SemiBold (600) — vurgular için.
   • Bold (700) — başlıklar için.

Yazı tiplerini siteye ekleme

Google sunucularından yazı tiplerini entegre etmenin iki ana yolu vardır.

Yöntem 1: HTML <link> etiketi aracılığıyla (Önerilen)

Bu yöntem, tarayıcının yazı tipini HTML ayrıştırmasıyla paralel olarak yüklemeye başlamasına olanak tanır, bu da daha hızlıdır.

1. Google Fonts sitesinde istediğiniz kalınlıkların yanındaki + Select this style butonuna tıklayın.
2. Sağdaki panelde Embed sekmesine geçin.
3. Standard (<link>) bölümündeki kodu kopyalayın.
4. Bunu HTML dosyanızın <head> bölümüne yapıştırın.

<head>
  <!-- Inter (400 ve 700) ekleme örneği -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
</head>

Ardından yazı tipini CSS'de uygulayın:

body {
  font-family: 'Inter', sans-serif;
}

h1 {
  font-weight: 700;
}

Yöntem 2: CSS içinde @import aracılığıyla

CSS dosyası tamamen yüklenene kadar sayfa render işlemini engelleyebileceği için daha az tercih edilen bir seçenektir. Yalnızca HTML şablonunu düzenleme erişiminiz yoksa kullanın.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
}

Yükleme hızının optimizasyonu

Yazı tipleri, özellikle LCP (Largest Contentful Paint) ve CLS (Cumulative Layout Shift) üzerinde Core Web Vitals metriklerini önemli ölçüde etkileyebilir.

Temel optimizasyon parametreleri

1. display=swap: URL'deki bu parametre tarayıcıya hemen yedek sistem yazı tipini göstermesini ve özel yazı tipini daha sonra yüklemesini söyler. Bu, metnin kaybolmasını (FOIT) ve düzen kaymalarını önler.
2. Karakter setlerinin kısıtlanması (subset): Yalnızca Rusça kullanıyorsanız, &subset=cyrillic parametresini ekleyin. Bu, Latin alfabesi, Yunanca ve diğer sembolleri hariç tutarak yazı tipi dosyasının boyutunu küçültür.
3. Nokta atışı glif yükleme (text): Yazı tipi yalnızca belirli bir başlık için kullanılıyorsa (örneğin, "İletişim"), yalnızca bu harfleri yükleyebilirsiniz: &text=Идетификация. Bu, dosya boyutunu radikal şekilde azaltır.

Optimize edilmiş URL örneği

https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&subset=cyrillic&display=swap

Optimizasyon yöntemlerinin karşılaştırılması

Google Docs ve belgelerde kullanım

Google Fonts kütüphanesi Google Dokümanlar (Docs), Slaytlar (Slides) ve Tablolar (Sheets) editörlerine entegre edilmiştir, ancak erişim popüler seçeneklerle sınırlıdır.

Google Docs'a yazı tipi ekleme

1. Belgeyi açın.
2. Araç çubuğunda yazı tipi açılır listesine tıklayın (genellikle Arial veya Roboto yazar).
3. Listenin en üstündeki Diğer yazı tipleri (More fonts) seçeneğini belirleyin.
4. Açılan pencerede arama veya filtreleri kullanın.
   • İpucu: Languages alanında Cyrillic seçeneğini işaretleyerek yalnızca Rusça desteği olan yazı tiplerini görün.
5. Beğendiğiniz yazı tipine tıklayarak favorilere ekleyin ve Tamam'a basın.

Artık bu yazı tipi tüm belgeleriniz için ana açılır listede mevcut olacaktır.

Yetenekleri genişletme: Extensis Fonts

Standart set yetersiz geliyorsa, resmi Extensis Fonts eklentisini yükleyin:

1. Menü Uzantılar → Uzantıları yükle.
2. "Extensis Fonts"u bulun ve yükleyin.
3. Uzantılar → Extensis Fonts → Start yoluyla başlatın.

Seçili metne uygulanabilen yüzlerce ek yazı tipine erişim sağlayan bir yan panel açılacaktır.

Sık yapılan hatalar

• Tüm kalınlıkları art arda ekleme. Yalnızca 400 ve 700 kullanıyorsanız, mevcut tüm kalınlıkları (100'den 900'e kadar) işaretlemeyin. Her ekstra kalınlık, indirilen veri boyutunu artırır.
• Yedek yazı tipi olmaması. CSS kuralının sonunda her zaman evrensel bir aile belirtin: font-family: 'Inter', sans-serif;. Google Fonts erişilemezse (engelleme, arıza), metin okunabilir kalır.
• preconnect'in ihmal edilmesi. Ön bağlantı olmadan tarayıcı, fonts.gstatic.com ile bağlantı kurmak için değerli milisaniyeler harcar.
• Kötü Kiril desteği olan yazı tiplerinin kullanılması. Bazı güzel görünümlü Latin yazı tiplerinin Kiril kısmı son derece zayıf veya kalitesiz olabilir. Seçimden önce mutlaka Rusça metinle önizlemeyi kontrol edin.

SSS

Google Fonts yazı tipleri ticari kullanım için ücretsiz midir? Evet, kütüphanedeki tüm yazı tipleri açık lisanslar altında (çoğunlukla SIL Open Font License) dağıtılır; bu da web sitelerinde ve basılı materyallerde ticari projelerde kullanımlarına izin verir.

Neden yazı tipi sitede görüntülenmiyor? Şunları kontrol edin: 1) <link> öğesi <head> içinde bağlı mı; 2) CSS'de yazı tipi adı doğru yazılmış mı (büyük/küçük harf duyarlıdır); 3) Doğru subset (Kiril) seçilmiş mi; 4) Tarayıcı konsolunda (F12) hata var mı.

700 kalınlığını eklemeden yazı tipini nasıl kalın yapabilirim? CSS özelliği font-weight: bold veya text-shadow kullanabilirsiniz, ancak sonuç gerçek Bold kalınlığı kadar iyi görünmeyecektir. Gerekli kalınlıkları her zaman açıkça eklemek daha iyidir.

Google yazı tipleri SEO'yu etkiler mi? Dolaylı olarak evet. Yazı tiplerinin hızlı yüklenmesi kullanıcı deneyimini ve sıralamada arama motorları tarafından dikkate alınan Core Web Vitals metriklerini iyileştirir. Yavaş yazı tipleri sıralamayı düşürebilir.