Google Fonts’u kendi sunucunuzdan sunmak, Türkçe harfler için adım adım

Bir Google fontunu kendi sitenizin dosyalarıyla sunmak için Google’ın bağlantı kodunu kaldırıp font dosyalarını kendi sunucunuza koymanız yeterli. Türkçe açısından tek kural şu: temel Latin parçasının yanında genişletilmiş Latin (latin-ext) parçası da sunulmalı, çünkü ğ, ş ve İ o parçada. Bu yazıda bunu iki yoldan nasıl yapacağınızı ve Türkçe bir sayfada kaç kilobayt indirileceğini anlatıyoruz.

Neden kendi sunucunuzdan?

Üç pratik gerekçe var:

• Sürümü siz seçersiniz. Google bir fontu güncellediğinde sizin siteniz de o anda değişir. Kendi dosyanızı sunduğunuzda güncellemeyi siz yaparsınız. Bu, Türkçe açısından iki yönlü bir durum: bir güncelleme eksik harfleri tamamlayabilir de. Ölçtüğümüz ailelerde gece gece görülen değişiklikleri son güncellenenler sayfasında listeliyoruz.
• Üçüncü taraf bağlantısı olmaz. Sayfa açılırken Google’ın sunucularına ayrı bir bağlantı kurulmaz. Gizlilik politikanızda “yazı tipleri kendi sunucumuzdan yüklenir” diyebilirsiniz.
• Tek yerden yönetim. Font dosyaları sitenizin geri kalanıyla aynı önbellek ve sıkıştırma ayarlarını kullanır.

Hız konusunda ise beklentiyi doğru kurmak gerekiyor. web.dev’in font rehberi, kendi sunucusundan sunmak ile üçüncü taraf hizmet kullanmak arasındaki performans farkının “o kadar net olmadığını” yazıyor; kendi sunucunuz bir içerik dağıtım ağı (CDN) ve HTTP/2 kullanmıyorsa kazanç küçük kalabilir. Aynı rehber yalnızca WOFF2 biçimini kullanmayı ve sayfadaki font sayısını azaltmayı öneriyor.

Yol 1, Fontsource paketleri

Fontsource, Google Fonts’taki fontları ve bazı başka açık lisanslı fontları npm paketleri olarak dağıtan açık kaynak bir proje. Bir derleme aracı (Vite, Astro, Next.js, webpack gibi) kullanıyorsanız en kısa yol bu.

Değişken font

Fontun değişken sürümü varsa @fontsource-variable/ ile başlayan paket kullanılır:

npm install @fontsource-variable/inter

import "@fontsource-variable/inter";

Fontsource’un değişken font belgesine göre CSS’te aileye “Variable” ekiyle başvurulur:

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

Varsayılan içe aktarma kalınlık (wght) eksenini ve normal stili yükler. İtalik için wght-italic.css, başka eksenler için wdth.css ya da opsz.css gibi ayrı dosyalar var; belgeye göre bir değişken font için tek bir içe aktarma kullanılmalı.

Sabit (statik) font

Değişken sürümü olmayan fontlar @fontsource/ paketiyle gelir. Kök içe aktarma genellikle yalnız 400 ağırlığını yükler; başka ağırlıklar ayrıca istenir:

import "@fontsource/poppins";        // 400
import "@fontsource/poppins/700.css"; // kalın

Fontsource’un kurulum belgesi iki noktanın altını çiziyor: normal stil içe aktarması italik sürümü içermez, ve çok sayıda ağırlık gerekiyorsa her sabit ağırlığı tek tek eklemek yerine değişken paketi tercih etmek daha doğru.

Türkçe için ayrıca bir şey yapmak gerekiyor mu?

Hayır. Belgeye göre paketlerin ürettiği CSS unicode-range kullanıyor ve tarayıcı yalnız sayfada kullanılan karakter kümelerini indiriyor; alt kümeleri elle seçmeniz normalde gerekmiyor. Türkçe bir sayfada ç, ö, ü ve ı temel Latin dosyasından, ğ, ş ve İ genişletilmiş Latin dosyasından gelir; paket ikisini de içerir.

Sitemizdeki her font sayfasında, o font için doğru paket adı ve font-family değeri yazılı. Örneğin Inter sayfasında @fontsource-variable/inter, Poppins sayfasında @fontsource/poppins görünür.

Yol 2, dosyaları elle eklemek

Derleme aracı kullanmayan bir sitede (düz HTML, bazı içerik yönetim sistemleri) WOFF2 dosyalarını indirip @font-face kurallarını kendiniz yazabilirsiniz. Türkçe için iki kural gerekir: biri temel Latin, biri genişletilmiş Latin dosyası için.

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/lora-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/lora-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

Bu aralıklar Fontsource’un ve Google’ın kullandığı standart Latin bölmesiyle aynı. İlk aralıkta U+0131 (noktasız ı) var; ikinci aralık U+0100–02BA ile Ğ ğ (U+011E–011F), İ (U+0130) ve Ş ş (U+015E–015F) harflerini kapsıyor. ₺ işareti (U+20BA) de ikinci aralıktaki U+20AD–20C0 bölümünde. MDN’in açıkladığı gibi, sayfada bu aralıklardan birine düşen tek bir karakter bile varsa o dosyanın tamamı indirilir; hiç yoksa indirilmez.

Sık yapılan hata, yalnız latin dosyasını indirip ikinci kuralı unutmaktır. Bu durumda font Türkçe harfleri çizdiği hâlde ğ, ş ve İ yedek fonttan gelir; sorun fonttan değil, eksik dosyadan kaynaklanır.

Türkçe bir sayfa kaç KB indirir?

Ayrıntılı sayfası olan 200 fontun Türkçe için gereken iki dosyasını Fontsource’tan indirip ölçtük. Değişken kalınlık ekseni olan 111 fontta iki dosyanın ortanca toplamı 54,4 KB, sabit fontlarda tek bir ağırlığın (genellikle 400) iki dosyası 34,3 KB. Birkaç örnek:

İki şey dikkat çekiyor. Birincisi, genişletilmiş Latin dosyası bazı fontlarda temel dosyadan büyük; Inter’de neredeyse iki katı. Türkçe sayfa, İngilizce sayfaya göre bu fontlarda belirgin biçimde daha fazla veri indirir. İkincisi, sabit Poppins’in tek ağırlığı çok küçük görünse de sitede dört ağırlık kullanırsanız toplam dört katına çıkar. Değişken bir dosya bütün kalınlıkları tek seferde taşır. Değişken ve sabit fontların farkını değişken font yazımızda ayrıca anlattık.

Geçişte kontrol listesi

1. Temanızdaki ya da sayfa şablonunuzdaki fonts.googleapis.com bağlantısını kaldırın; iki kaynaktan aynı adla font yüklemek karışıklık yaratır.
2. Fontun Türkçe harfleri gerçekten çizdiğini kontrol edin. Dosyayı kendiniz sunmak eksik harfi tamamlamaz; Lato gibi bazı popüler fontlarda Ğ, İ ve Ş yoktur. Durumu font listesinde görebilirsiniz.
3. Hem temel hem genişletilmiş Latin dosyasını sunduğunuzdan emin olun.
4. “ŞİŞLİ’DE IĞDIR’LI” gibi büyük harfli bir satırla sayfayı açıp tarayıcı geliştirici araçlarındaki “işlenen fontlar” listesinde tek bir font adı göründüğünü doğrulayın.
5. Lisans dosyasını font dosyalarının yanına koyun. Google Fonts’taki fontların lisanslarını lisans yazımızda anlattık.