Web siteleri için Google Fonts yazı tiplerini entegre etme: 2026 kılavuzu

2026 yılında Google Fonts kütüphanesinden bir yazı tipini web sitenize entegre etmek için fonts.google.com adresine girip, yazı tiplerini Cyrillic diline göre filtrelemek, istediğiniz yazı kalınlıklarını seçmek ve HTML belgenizin <head> bölümüne eklemek üzere <link> kodunu kopyalamak yeterlidir. Bu yöntem, dosyaları manuel olarak indirmeye gerek kalmadan hızlı yükleme, otomatik önbellekleme ve tüm modern tarayıcılar için destek sağlar.

Kütüphane, Rusça dil desteği sunan 1500'den fazla yazı tipi içermekte olup, bu da onu web geliştirme için endüstri standardı haline getirmektedir. Aşağıda, seçimden teknik optimizasyona kadar sürecin detaylı bir incelemesi yer almaktadır.

2026 yılında neden Google Fonts kullanılmalı?

Alternatif servislerin ortaya çıkmasına rağmen, Google Fonts performans ve geliştirme kolaylığı açısından kritik öneme sahip üç faktör sayesinde lider konumunu korumaktadır:

1. Tamamen ücretsiz ve açık lisans. Tüm yazı tipleri SIL Open Font License (OFL) lisansı altında dağıtılmaktadır. Bunları kişisel bloglarda, ticari e-ticaret sitelerinde ve kurumsal portallarda herhangi bir ücret ödemeden ve yasal risk taşımadan kullanabilirsiniz.
2. Küresel içerik dağıtım ağı (CDN). Yazı tipi dosyaları, dünyadaki yüzlerce şehirde varlık noktalarına sahip Google sunucularından sunulur. Bu durum, coğrafi konumu ne olursa olsun kullanıcılar için gecikmeleri (latency) en aza indirir.
3. Tarayıcıya göre otomatik optimizasyon. Servis, yalnızca ziyaretçinin tarayıcısının desteklediği glifleri ve formatları içeren yazı tipi dosyasını dinamik olarak oluşturur. Safari, Chrome veya Firefox için farklı sürümler oluşturmanıza gerek yoktur.

Yazı tiplerini arama ve filtreleme algoritması

Kütüphane binlerce seçenek içerdiğinden, kör denemeler etkili değildir. Arama alanını anında daraltmak için yerleşik filtreleri kullanın.

Adım 1: Dil filtresinin ayarlanması

Siteye giriş yaptıktan hemen sonra sağ panelde Language filtresini bulun. Cyrillic seçeneğini işaretleyin. Bu işlem, Rus alfabesini desteklemeyen tüm yazı tiplerini gizleyerek yalnızca ilgili seçenekleri (genellikle yaklaşık 200-300 aile) bırakacaktır.

Adım 2: Kategoriye göre sıralama

Yazı tipinin tasarımdaki rolünü belirleyin:

• Sans Serif — arayüzler, makaleler ve mağazalar için ana metinlerde (maksimum okunabilirlik).
• Serif — başlıklar, uzun okuma gerektiren içerikler ve "klasik" bir atmosfere sahip web siteleri için.
• Display — yalnızca büyük başlıklar ve banner'lar için dekoratif yazı tipleri.
• Monospace — kod blokları, teknik dokümantasyon ve veri tabloları için.

Adım 3: Görsel kontrol

Önizleme alanında ("Type something") karmaşık harfler içeren Rusça bir test cümlesi girin (örneğin, «Ж, Щ, Ъ, Ю»). Harf aralığına (kerning) ve küçük harflerin yüksekliğine dikkat edin.

Proje için ideal yazı tipini seçme kriterleri

Tipografi seçimi, dönüşüm oranlarını ve okuma süresini etkiler. Adayları aşağıdaki parametrelere göre değerlendirin:

Görev türüne göre yazı tipi seçimi

• E-ticaret ve SaaS: Sans serif, nötr grotesk yazı tipleri. Örnekler: Inter, Roboto, Open Sans, Manrope. İçerikten ve ürünlerden dikkati dağıtmazlar.
• Medya ve bloglar: "Serif + Grotesk" kombinasyonları. Karakterli başlıklar (Merriweather, Playfair Display) ve ana metin (Lato, Source Sans Pro).
• Portfolyo ve yaratıcı işler: Başlıklar için vurgulu yazı tipleri (Yeseva One, Ruslan Display) basit bir metin yazı tipiyle birlikte kullanılır.
• IT ürünleri: Kod için monospaced yazı tipleri (Fira Code, JetBrains Mono, Roboto Mono).

Web sitesine entegrasyon yöntemleri

Entegrasyon için iki temel yöntem vardır: Bulut API'si aracılığıyla (önerilen) ve dosyaların yerel olarak barındırılması.

Yöntem 1: API aracılığıyla entegrasyon (Embed Code)

Bu, projelerin %95'i için en hızlı ve etkili yöntemdir. Otomatik güncellemeler ve önbellekleme sağlar.

Talimatlar:

1. Seçilen yazı tipinin sayfasında mavi Get font butonuna tıklayın.
2. Açılan sağ panelde yalnızca gerekli yazı kalınlıklarının işaretli olduğundan emin olun (gereksiz işaretlemeleri kaldırın).
3. bloğundaki kodu kopyalayın.

Bu kodu, HTML belgenizin <head> bölümüne, ana CSS stillerini bağlamadan önce yerleştirin:

<head>
  <!-- DNS hızlandırmak için ön bağlantı -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  
  <!-- Ana yazı tipi kodu -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
</head>

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

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

Yöntem 2: Yerel entegrasyon (Self-hosting)

Güvenlik gereksinimleri dış istekleri yasaklıyorsa veya web sitesinin internetsiz çalışması gerekiyorsa bu yöntemi kullanın.

1. Yazı tipi seçim panelinde Download family butonuna tıklayın.
2. Arşivi çıkarın. .woff2 formatındaki dosyalara ihtiyacınız olacak (en modern ve hafif olanlardır).
3. Dosyaları projenizin bir klasörüne yükleyin (örneğin, /assets/fonts/).
4. Yazı tipini CSS'te @font-face kuralı ile tanımlayın:

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Performans için önemli */
}

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

Yükleme hızı optimizasyonu (Core Web Vitals)

Yazı tipleri yanlış entegre edilirse web sitesini önemli ölçüde yavaşlatabilir. Yüksek performans puanlarını korumak için şu kurallara uyun:

1. Yazı kalınlığı sayısını en aza indirin. 100'den 900'e kadar tüm aralığı entegre etmeyin. Genellikle üç tanesi yeterlidir: Regular (400), Medium (500) ve Bold (700). Her ekstra yazı kalınlığı, sayfa boyutuna 30–50 KB ekler.
2. font-display: swap özelliğini kullanın. Bu özellik, tarayıcıya metni hemen sistem yazı tipiyle göstermesini ve hazır olduğunda yüklenen yazı tipiyle değiştirmesini söyler. Bu, "görünmez metin" (FOIT) etkisini önler. Google API kodunda bu varsayılan olarak etkindir (URL'de &display=swap).
3. Yalnızca gerekli karakter setini yükleyin (Subsets). Web siteniz yalnızca Rusça ise, entegrasyon URL'sinde gereksiz dillerin olmadığından emin olun. Google oluşturucusunda bu, dil seçildiğinde otomatik olarak ayarlanır, ancak bağlantıyı manuel olarak oluştururken &subset=cyrillic parametresini ekleyin.
4. Kritik yazı tiplerini önceden yükleyin. Eğer bir yazı tipi ilk ekran (LCP) için kullanılıyorsa, doğrudan <head> içine preload niteliği ile bir bağlantı ekleyin:

    <link rel="preload" href="https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hjp-Ek-_EeA.woff2" as="font" type="font/woff2" crossorigin>
    ```

## Yazı tipleriyle çalışırken yapılan yaygın hatalar

*   **Tüm stillerin aynı anda entegre edilmesi.** "Her ihtimale karşı" 10 yazı kalınlığını yüklemek, içeriğin ilk render edilme süresini (FCP) artırır ve mobil kullanıcıların trafiğini boşa harcar.
*   **Yedek planın (fallback) olmaması.** Özel yazı tipinden sonra her zaman bir yazı tipi ailesi belirtin: `font-family: 'MyFont', sans-serif;`. Yazı tipi yüklenmezse, metin okunabilir kalır ve Times New Roman'a dönüşmez.
*   **Mobil versiyonun ihmal edilmesi.** Masaüstünde 16px boyutunda harika görünen bir yazı tipi, akıllı telefonda çok küçük kalabilir. Boyutu adapte etmek için bağıl birimler (rem) ve medya sorguları kullanın.

## SSS

**Google Fonts'u kullanmak için kayıt olmak gerekir mi?**
Hayır, kayıt gerekli değildir. Kütüphane tamamen açıktır ve anonim olarak erişilebilir.

**Yazı tipleri logolarda ve basılı materyallerde kullanılabilir mi?**
Evet, OFL lisansı, yazı tiplerinin telif ücreti ödemeden baskı, video ve logolar dahil olmak üzere herhangi bir amaçla kullanılmasına izin verir.

**Yazı tipi web sitesinde görüntülenmiyorsa ne yapılmalı?**
CSS'teki adın doğru yazıldığını kontrol edin (kütüphanedaki adla tam olarak eşleşmelidir, boşluklar ve büyük/küçük harf dahil). `<link>` kodunun `<body>` yerine tam olarak `<head>` içine yerleştirildiğinden emin olun. Ayrıca 404 hataları için tarayıcı konsolunu (F12) kontrol edin.

**Yeni bir sürüm çıktığında yazı tipi nasıl güncellenir?**
API (`<link>`) kullanıldığında, güncelleme Google sunucuları tarafında otomatik olarak gerçekleşir. Kodda herhangi bir değişiklik yapmanız gerekmez. Dosyaları yerel olarak saklıyorsanız, yeni sürümü indirip dosyaları manuel olarak değiştirmeniz gerekecektir.