WordPress Temalarında Değişken Yazı Tiplerini Kullanma için theme.json, WOFF2 ve font ağırlığı ayarlarını öğrenip görüntüleme sorunlarını kolayca çözün.
WordPress sitesinde tipografi ayarlarını değiştirirken başlıkların editörde doğru, ziyaretçi tarafında ise bambaşka görünmesi sık rastlanan bir sorundur. Birden fazla kalınlık dosyası eklendiğinde sayfa yükü de gereksiz yere büyüyebilir. WordPress Temalarında Değişken Yazı Tiplerini Kullanma yöntemi, bu iki sorunu tek font dosyası ve kontrollü ağırlık aralıklarıyla çözmeye yardımcı olur.
Buradaki kritik nokta yalnızca bir WOFF2 dosyasını tema klasörüne kopyalamak değildir. Fontun theme.json içinde tanımlanması, dosya yolunun doğru kurulması ve gerektiğinde CSS tarafında desteklenmesi gerekir. Alt tema kullanıyorsanız üst temadaki yazı tiplerini de hesaba katmalısınız; aksi hâlde güncelleme sonrasında Font Kitaplığı seçenekleri eksilebilir.
Tema seçimi aşamasındaysanız tipografi kararından önce altyapının nasıl yönetileceğini netleştirmek işinizi kolaylaştırır. WordPress mi, Statik HTML mi Sitenizi Nasıl Oluşturmalısınız içeriği, güncelleme kolaylığı ile doğrudan kod kontrolü arasındaki farkı değerlendirmenize yardımcı olabilir. Bu ayrım, yazı tipi dosyalarının tema içinde mi yoksa daha bağımsız bir yapı üzerinden mi yönetileceğini de etkiler.
WordPress Temalarında Değişken Yazı Tiplerini Kullanma Nasıl Yapılır?
Değişken yazı tipi dosyasını alt temanın assets/fonts klasörüne yerleştirin, ardından theme.json içindeki typography ve fontFamilies alanlarında font ailesini tanımlayın. fontFace bölümüne WOFF2 dosya yolunu, stil bilgisini ve desteklenen ağırlık aralığını ekleyin. Başlık veya gövde kullanımını styles alanından belirleyip editör ile ön yüzü birlikte kontrol edin.
WordPress’in güncel theme.json yapısında yazı tipi aileleri settings.typography.fontFamilies alanından kaydedilir. Font dosyasına ait yol, stil ve ağırlık bilgileri ise fontFace altında tutulur. Resmî tema belgelerinde theme.json sürüm 3 güncel yapı olarak gösterilir; yine de kullandığınız çekirdek sürüm ve tema şeması birbiriyle uyumlu olmalıdır.
Değişken yazı tipi neden daha verimlidir?
Klasik font kullanımında normal, kalın, italik ve kalın italik biçimler çoğunlukla ayrı dosyalardan yüklenir. Değişken fontta ise desteklenen eksenler tek dosyada toplanabilir. Ağırlık için font-weight, eğim için font-style, genişlik için font-stretch kullanılabilir. Böylece tema, ihtiyaç duyduğu farklı görünümleri daha az dosya isteğiyle sunar.
Bu yapı tasarım tarafında da daha esnektir. Statik bir font sizi 400, 500 veya 600 gibi hazır değerlere bağlarken değişken dosya, tanımlı aralık içindeki ara değerleri kullanabilir. Örneğin başlık ağırlığını 600 yerine 575 olarak ayarlamak mümkündür. Ancak seçtiğiniz değer mutlaka font dosyasının desteklediği aralıkta kalmalıdır.
Font dosyası theme.json içine nasıl eklenir?
Önce lisansı uygun bir WOFF2 değişken font dosyası seçin ve alt temada düzenli bir klasöre taşıyın. Ardından fontFamilies içinde okunabilir ad, kısa tanımlayıcı ve CSS font ailesi bilgisi oluşturun. fontFace kaydında dosya yolunu alt temaya göre yazın. Örneğin 100 ile 900 aralığını destekleyen bir dosyada fontWeight değeri bu aralığı göstermelidir.
Başlıklarda farklı, gövde metninde farklı bir aile kullanacaksanız atamayı styles bölümünde yapın. Gövde için genel typography alanı, başlıklar için elements altındaki heading ayarı kullanılabilir. WordPress bu tanımları uygun CSS değişkenlerine dönüştürür ve desteklenen blokların Tipografi alanında font seçimini görünür hâle getirir.
Basit CSS desteği ne zaman gerekir?
Font editörde görünüyor fakat yayımlanan sayfada uygulanmıyorsa dosya yolu, önbellek ve CSS önceliği kontrol edilmelidir. Bazı tema yapılarında @font-face tanımını style.css ya da ayrı bir fonts.css dosyasına eklemek sorunu giderir. font-display: swap kullanımı, yazı tipi yüklenirken metnin görünmez kalmasını önlemek için dengeli bir tercihtir.
@font-face {
font-family: 'Vollkorn';
src: url('./assets/fonts/Vollkorn-VariableFont_wght.woff2') format('woff2');
font-weight: 400 900;
font-style: normal;
font-display: swap;
}Yazı tipi editörde var ama sitede neden görünmüyor?
İlk kontrol edilmesi gereken yer dosya yoludur. Üst tema klasörünü hedefleyen göreli bir yol, alt tema güncellendiğinde ya da klasör yapısı değiştiğinde bozulabilir. İkinci olarak önbellek katmanlarını temizleyin ve tarayıcı geliştirici araçlarında WOFF2 isteğinin 200 yanıtı alıp almadığına bakın. 404 görülüyorsa sorun CSS değil, dosyanın bulunamamasıdır.
Editör notu: Twenty Twenty-Five tabanlı bir alt temada yaptığım kontrolde, font ailesini yalnızca CSS ile tanımladığımda ön yüzde doğru görünmesine rağmen Görünüm > Düzenleyici > Stiller > Tipografi alanında seçilebilir hâle gelmediğini fark ettim. Aynı aileyi theme.json içine eklediğimde editör ve ziyaretçi görünümü eşleşti. Menü adları sürüme veya kullanılan dile göre değişebilir.
Özel ağırlık değerleri nasıl uygulanır?
WordPress arayüzü her temada 532 ya da 575 gibi ara ağırlıkları hazır seçenek olarak göstermeyebilir. Böyle bir durumda ağırlığı tema stillerinden, bloklara eklenen özel CSS üzerinden veya doğrulama içeren küçük bir eklentiyle belirlemek mümkündür. Yönetim alanından değer alınacaksa 100 ile 900 arasındaki girişler denetlenmeli; geçersiz değerlerin doğrudan sayfaya yazdırılmasına izin verilmemelidir.
2026 itibarıyla Font Kitaplığı, yazı tiplerini site düzenleyicisi üzerinden yönetmeyi kolaylaştırır; buna rağmen tema içinde kalıcı ve taşınabilir bir kurulum hedefleniyorsa theme.json kaydı önemini korur. Font ailelerinin bu dosyada tanımlanması, temanın kendi tipografi seçeneklerini tutarlı biçimde sunmasına yardımcı olur.
Kurulum adımları doğru olmasına rağmen editör ve ön yüz arasında farklılık devam ediyorsa, tema dosyalarını değiştirmeden önce yedek alın. 11858, 2011 yılından bu yana Türkiye genelinde 7/24 teknik destek sağlıyor; bilgisayar, akıllı TV, sosyal medya ve modem kurulumları dâhil farklı sorunlarda lisanslı TeamViewer ve AnyDesk bağlantılarıyla uzaktan destek sunuyor. Dakika bazlı şeffaf ücretlendirme, yüzde 95 memnuniyet oranı ve 500.000’den fazla başarılı işlem tecrübesiyle çalışan uzman ekipten destek almak için 11858’i Ara seçeneğini kullanabilirsiniz.
Değişken font seçimi yalnızca görünümü değil, içerik hiyerarşisini ve algılanan site hızını da etkiler. Kurumsal bir hizmet sitesi üzerinde çalışıyorsanız B2B SaaS için WordPress’i Optimize Etme içeriğindeki performans ve yapılandırma adımlarını da değerlendirin. Tipografi kararını önbellek, blok yapısı ve sayfa ağırlığıyla birlikte ele almak daha dengeli bir yapı oluşturur.
WordPress Temalarında Değişken Yazı Tiplerini Kullanma sürecinde en doğru tercih, mümkün olan en fazla fontu eklemek değil; okunabilirliği koruyan, gerçekten kullanılan ağırlıkları doğru tanımlamaktır. Siz hangi değişken fontu tercih ettiniz ve editör ile ön yüzde aynı görünümü elde edebildiniz mi? Deneyiminizi yorumlarda paylaşın.
