Google Fonts kullanmak yerine fontları yerelde nasıl barındırırsınız

Neden Google Fonts’u kendiniz barındırmalısınız?

Google Fonts iyi tipografiyi kolaylaştırdı. Bir stil sayfası ekleyin, birkaç ağırlık seçin, sayfayı yayına alın. Yıllarca küçük ekipler için makul varsayılan buydu.

Bunun karşılığında, her ziyaretçinin tarayıcısı font CSS’ini ve font dosyalarını almak için üçüncü taraf bir hizmetle iletişim kurar. Bunun iki sonucu vardır.

İlk olarak, render sürecine harici bir bağımlılık ekler. Font CSS’i yavaşsa, engellenirse ya da kullanıcının bölgesinde veya ağında erişilemiyorsa, sayfanız bekler ya da yedek fonta döner.

İkinci olarak, bir gizlilik sorusu doğurur. Bir font isteği kullanıcının IP adresini, user agent bilgisini, referrer policy bağlamını ve zamanlama bilgilerini üçüncü bir tarafa gösterebilir. Google Fonts, Fonts API üzerinden çerez ayarlamadığını belirtir; ancak “çerez yok” ile “kişisel veri yok” aynı şey değildir. GDPR kapsamında bir IP adresi bağlama göre hâlâ kişisel veri olabilir.

Fontları kendiniz barındırmak her web sitesi için otomatik olarak zorunlu değildir ve bu hukuki tavsiye değildir. Ancak Avrupa siteleri, kamu sektörü siteleri, sağlık, eğitim, finans veya gereksiz üçüncü taraf isteklerini azaltmaya çalışan herhangi bir ekip için yerel barındırma genellikle daha temiz bir tercihtir.

Doğru yapıldığında çoğu zaman performans açısından da kazanç sağlar. Kritik nokta “doğru yapıldığında” kısmıdır. Altı font dosyasını /assets/fonts/ içine kopyalayıp hepsini her sayfada yüklemek, barındırılan hizmeti kullanmaktan daha kötü olabilir. Daha geniş performans bağlamını görmek isterseniz, web fontlarının çoğu sitede hâlâ en kolay performans kazanımı olmasının nedeni üzerine önceki yazımız yaygın israf kalıplarını ele alıyor.

Kendiniz barındırdığınızda ne değişir?

Google Fonts’u alışılmış şekilde kullandığınızda sayfanız şunu yapar:

<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;600&display=swap" rel="stylesheet">

Tarayıcı önce fonts.googleapis.com üzerinden CSS ister, ardından font dosyalarını fonts.gstatic.com üzerinden indirir.

Kendiniz barındırdığınızda sayfanız hem CSS’i hem de font dosyalarını kendi alan adınızdan istemelidir:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Bu, üçüncü taraf font isteğini ortadan kaldırır. Aynı zamanda dosya formatlarını, cache header’larını, yedek fontları ve güncellemeleri seçme sorumluluğunu size verir.

Bu sorumluluğu ciddiye almak gerekir. Fontlar kritik render yolunda yer alır. Kötü bir font kurulumu görünmez metne, layout shift’lere ve yavaş ilk render’a neden olabilir.

Adım 1: Gerçekte ne kullandığınızı denetleyin

Herhangi bir şey indirmeden önce sitenizin gerçekten ihtiyaç duyduğu font ailelerini, ağırlıkları, stilleri ve karakter kümelerini listeleyin.

Tipik bir pazarlama sitesi şunlara ihtiyaç duyabilir:

• Gövde metni için Regular 400
• Başlıklar ve butonlar için Semibold 600 veya bold 700
• Tasarım gerçekten italik kullanıyorsa yalnızca Italic 400
• Site daha fazla dili desteklemiyorsa yalnızca Latin karakter kümesi

Eski tasarım sistemi varsayılanlarına şüpheyle yaklaşın. Birçok site 300, 400, 500, 600, 700, italikler ve birden fazla script yükler; çünkü birileri bunları bir zamanlar font seçicide seçmiştir.

Tarayıcı DevTools içinde Network panelini açın, “font” ile filtreleyin, sayfayı yeniden yükleyin ve hangi dosyaların istendiğini kontrol edin. Ardından CSS’inizdeki font-weight kullanımını inceleyin. CSS’iniz 300’ü hiç kullanmıyorsa 300’ü barındırmayın.

Etkisini daha sonra değerlendiriyorsanız Lighthouse yardımcı olabilir; ancak puanını hikâyenin tamamı gibi görmeyin. Onu bir yargıç değil, tanı aracı olarak kullanın. Font düzeltmelerini önceliklendirirken yararlı olan panik yapmadan Lighthouse raporu okuma üzerine ayrı bir rehberimiz var.

Adım 2: Doğru font dosyalarını indirin

Google Fonts açık kaynak fontlar sunar. Bunları Google Fonts web sitesinden veya ilgili font projesi deposundan indirebilirsiniz. Lisansı kontrol edin; ancak çoğu Google Fonts, SIL Open Font License veya Apache License gibi açık lisanslar altında dağıtılır.

Web için WOFF2’yi tercih edin. Modern tarayıcılar tarafından yaygın olarak desteklenir ve genellikle TTF veya OTF’den çok daha küçüktür. 2026’da TTF’yi doğrudan tarayıcılara sunmak, herkese açık web siteleri için nadiren gerekçelendirilebilir.

Makul bir dizin yapısı şöyle görünür:

/public
  /fonts
    inter-latin-400.woff2
    inter-latin-600.woff2
    inter-latin-700.woff2

Açıklayıcı dosya adları kullanın. Altı ay sonra font.woff2 can sıkıcı olacaktır. inter-latin-600.woff2 sıkıcıdır ama kullanışlıdır.

Siteniz bir build system kullanıyorsa kaynak fontları açık bir yerde tutun ve build pipeline’ın optimize edilmiş dosyaları public assets dizinine kopyalamasını sağlayın.

Adım 3: Uygun yerlerde fontları alt kümelere ayırın

Alt kümeleme, ihtiyaç duymadığınız karakterleri kaldırmak anlamına gelir. Tam bir font Latin, Kiril, Yunan, Vietnamca, semboller ve birçok OpenType özelliği içerebilir. Yalnızca İngilizce bir landing page sadece Latin karakterlerine ihtiyaç duyuyorsa, bir alt küme dramatik biçimde daha küçük olabilir.

İki yaygın yaklaşım vardır:

1. Font sağlayıcısından veya depodan hazır bir alt küme kullanın.
2. fonttools içindeki pyftsubset gibi bir font aracıyla kendi alt kümenizi oluşturun.

Birçok ekip için hazır Latin alt kümeleri yeterlidir. Özel alt kümeleme, sınırlı metne sahip tek bir kampanya sayfası veya öngörülebilir karakter kapsamına sahip bir ürün arayüzü gibi çok kısıtlı sayfalarda yararlıdır.

Çok dilli sitelerde dikkatli olun. Eksik glyph’ler yedek font karışımına neden olur; bu da bozuk görünebilir ve okunabilirliğe zarar verebilir. Birden fazla dili destekliyorsanız her yerde tek bir küçük alt kümeyi zorlamak yerine font alt kümelerini dil rotalarına eşleyin.

Adım 4: @font-face kurallarınızı yazın

Minimal bir yerel kurulum şöyle görünür:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

Burada birkaç ayrıntı önemlidir.

Çoğu içerik sitesi için font-display: swap kullanın. Bu, tarayıcıya yedek metni hızlıca göstermesini, web fontu geldiğinde de onunla değiştirmesini söyler. Böylece FOIT’in en kötü versiyonundan, yani görünmez metin parlamasından kaçınılır.

Açık bir yedek font yığını belirleyin. Özel font başarısız olursa kullanıcılar yine de okunabilir metin görmelidir. Yedekler sonradan düşünülmüş bir ayrıntı değildir; tasarımın parçasıdır. Boyutlandırmayı, satır uzunluğunu ve gövde metni tercihlerini yeniden ele almanız gerekiyorsa modern web’de okunabilir yazı için pratik bir rehber ile başlayın.

Ağırlıkları doğru eşleştirin. CSS’iniz font-weight: 500 istiyor ama siz yalnızca 400 ve 700 tanımlıyorsanız tarayıcı ara bir ağırlık sentezleyebilir. Bu her zaman korkunç değildir, ancak tutarsız görünebilir.

Adım 5: Harici Google Fonts çağrılarını kaldırın

Yerel font CSS’ini ekledikten sonra şablonlarınızdan eski uzak çağrıları kaldırın.

Şunları arayın:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?..." rel="stylesheet">

Ayrıca şunları kontrol edin:

• CMS platformlarındaki tema ayarları
• Page-builder tipografi panelleri
• Üçüncü taraf widget’lar
• Tag manager’lar
• @import url('https://fonts.googleapis.com/...') gibi eski CSS import’ları

Sonuncusu yaygındır. Fontlar için CSS @import kullanımı genellikle performans açısından daha kötüdür; çünkü keşfi geciktirir. Kendiniz barındırıyorsanız fontları doğrudan ana CSS’inizde veya erken yüklenen bir font CSS dosyasında tanımlayın.

Gizlilik çalışmaları çoğu zaman ekipler bariz şablonu düzeltip script’leri, widget’ları ve eski embed’leri kaçırdığı için başarısız olur. Aynı kalıp rıza çalışmalarında da görülür; üçüncü taraf yüzey alanını daha genel olarak azaltıyorsanız 2026’da çerezler için nelerin değiştiği rehberimiz yararlı bir tamamlayıcıdır.

Adım 6: Cache header’larını ayarlayın

Font dosyaları statik varlıklardır. Dosya adları versiyonlanmış veya içerik hash’li ise agresif şekilde cache’lenmelidir.

İyi bir production header şöyledir:

Cache-Control: public, max-age=31536000, immutable

Uzun ömürlü immutable caching’i yalnızca dosya değiştiğinde URL de değişiyorsa kullanın. Örneğin:

inter-latin-400.a8f3c2.woff2

veya versiyonlanmış bir yol:

/fonts/v2/inter-latin-400.woff2

URL’yi değiştirmeden /fonts/inter-latin-400.woff2 üzerine yazarsanız, bazı kullanıcılar eski dosyayı uzun süre tutabilir. Bu, sorun olana kadar sorun değildir. Versiyonlama bu problemi önler.

Fontları doğru MIME type ile de sunun:

Content-Type: font/woff2

Modern hosting platformlarının çoğu bunu otomatik olarak yapar, ancak doğrulamakta fayda vardır.

Adım 7: Yalnızca kritik fontu preload etmeyi düşünün

Preload, tarayıcının önemli bir fontu daha erken keşfetmesine yardımcı olabilir:

<link rel="preload" href="/fonts/inter-latin-400.woff2" as="font" type="font/woff2" crossorigin>

Bunu ölçülü kullanın. Her font ağırlığını değil, above-the-fold birincil metin fontunu preload edin. Aşırı preload; CSS, görseller ve JavaScript ile rekabete girer.

Same-origin fontlar için bile font preload’larında crossorigin ekleyin. Font getirme CORS mode kullanır ve bunu atlamak bazı kurulumlarda çift indirmeye neden olabilir.

Emin değilseniz test edin. Bir checklist öyle söylüyor diye preload’ları sorgusuz uygulamayın.

Adım 8: Gizlilik ve performansı test edin

Test etmek basittir.

DevTools’u açın, cache devre dışıyken sayfayı yeniden yükleyin ve Network panelinde şunlara göre filtreleyin:

• fonts.googleapis.com
• fonts.gstatic.com
• .woff2
• font

Font dosyalarının kendi alan adınızdan sunulduğunu ve Google Fonts isteği olmadığını görmelisiniz.

Ardından cold cache ve warm cache ile test edin. İlk ziyarette fontlar bir kez indirilmelidir. Sonraki ziyaretlerde tarayıcıya bağlı olarak memory veya disk cache’den gelmelidir.

Font değişimi sırasında layout shift olup olmadığını kontrol edin. Başlıklar zıplıyorsa yedek font metrikleriniz web fontundan fazla farklıdır. Daha yakın bir yedek seçerek veya size-adjust, ascent-override, descent-override ve line-gap-override gibi daha yeni CSS font metric override’larını kullanarak görünür kaymayı azaltabilirsiniz. Bunlar daha ileri düzeydedir, ancak özenli arayüzler için yararlıdır.

Son olarak sayfaları gizli gezinmede veya content blocker’lar etkin durumdayken test edin. Kendiniz barındırmanın bir avantajı, gizlilik araçlarının tipografinizi yanlışlıkla engelleme olasılığının daha düşük olmasıdır.

Kaçınılması gereken yaygın hatalar

Çok fazla ağırlık barındırmak

Bu en yaygın başarısızlıktır. İki ağırlık çoğu zaman yeterlidir. Üç genellikle fazlasıyla yeterlidir. Güçlü bir nedeniniz yoksa beş ağırlık bir tasarım sistemi kokusudur.

İtalikleri unutmak

İçeriğiniz gerçek vurgu kullanıyorsa gerçek bir italik dosya yükleyin. Sentetik italikler özellikle uzun biçimli editoryal içerikte kötü görünebilir.

Eski Google CSS bağlantısını tutmak

Bu, amacı boşa çıkarır. Geçişten sonra başka bir bileşen enjekte etmiyorsa hiçbir font isteği Google’a gitmemelidir.

Fontları uzun vadeli cache olmadan sunmak

Kendiniz barındırmak size kontrol verir. Bunu kullanın. Fontlar uzun cache ömürleri için ideal adaylardır.

Hukuki ve dokümantasyon işlerini göz ardı etmek

Gizlilik politikanız daha önce Google Fonts’tan veya üçüncü taraf font yüklemesinden bahsediyorsa geçişten sonra güncelleyin. Bir veri işleme envanteri tutuyorsanız onu da güncelleyin. Teknik değişiklik ile uyumluluk kaydı birbiriyle tutarlı olmalıdır.

<!-- tool-cta:start -->

💡 Bunu deneyin: Google Fonts'tan indirdiğiniz TTF dosyalarını Webfont Generator ile kendi kendine barındırılabilir WOFF2 ve CSS'ye dönüştürün.

<!-- tool-cta:end -->

Basit bir geçiş checklist’i

1. Gerçekte kullandığınız font ailelerini, ağırlıkları, stilleri ve script’leri listeleyin.
2. WOFF2 dosyalarını indirin ve lisansı doğrulayın.
3. Sitenin sınırlı dil ihtiyacı varsa fontları alt kümelere ayırın.
4. font-display: swap ile yerel @font-face kuralları ekleyin.
5. Tüm Google Fonts link, preconnect ve @import referanslarını kaldırın.
6. Fontları kendi alan adınızdan uzun ömürlü cache header’larıyla sunun.
7. Testler destekliyorsa yalnızca en önemli above-the-fold fontu preload edin.
8. DevTools içinde hiçbir Google Fonts isteği kalmadığını doğrulayın.
9. Gerekirse gizlilik dokümantasyonunu güncelleyin.

Fontları kendiniz barındırmak gösterişli bir iş değildir. Bağımlılık riskini azaltan, gizlilik yaklaşımını iyileştiren ve daha öngörülebilir render sağlayan küçük altyapı temizliklerinden biridir. Genellikle harcanacak bir veya iki saate değer.