Wordpress İle Özel Yazı Tipi Tanımlama Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Özel bir yazı tipi eklemeden önce, çalışma ortamınızın hazır olduğundan emin olmalısınız. Yanlış yapılan bir işlem sitenizin görünümünü bozabilir, bu nedenle her zaman bir yedek almanız önerilir.

• Alt Tema (Child Theme): Değişikliklerinizi mutlaka bir alt tema içerisinde yapmalısınız. Aksi takdirde, ana tema güncellendiğinde tüm kodlarınız silinir.
• FTP/SFTP Erişimi: Dosya yönetimi için bir FTP istemcisi (FileZilla vb.) veya barındırma panelinizdeki dosya yöneticisi.
• Yazı Tipi Dosyaları: Web için optimize edilmiş .woff ve .woff2 formatındaki yazı tipi dosyaları.
• Kod Editörü: PHP ve CSS düzenlemeleri için VS Code gibi gelişmiş bir metin editörü.

Adım 1: Yazı Tipi Dosyalarını Sunucuya Yükleme

Öncelikle yazı tipi dosyalarınızı temanızın içine yerleştirmeniz gerekir. Temanızın ana dizininde "fonts" adında bir klasör oluşturun ve dosyalarınızı buraya yükleyin. Bu yöntem, yazı tiplerinin sunucunuzdan hızlıca çağrılmasını sağlar.

Dosyaları yükledikten sonra, dosya yollarının doğruluğunu kontrol edin. Örneğin: /wp-content/themes/tema-adiniz/fonts/ozel-font.woff2 yolu, ileride kullanacağımız CSS tanımlaması için temel oluşturacaktır.

Adım 2: CSS ile @font-face Tanımlama

WordPress dünyasında özel yazı tiplerini tarayıcıya tanıtmanın en standart yolu CSS @font-face kuralıdır. Bu kural, tarayıcıya fontun nerede olduğunu ve nasıl yükleneceğini söyler.

Aşağıdaki CSS kodunu, alt temanızın style.css dosyasına veya "Görünüm > Özelleştir > Ek CSS" alanına ekleyin:

@font-face {
    font-family: 'MarkamınFontu';
    src: url('fonts/ozel-font.woff2') format('woff2'),
         url('fonts/ozel-font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Burada font-display: swap; kullanımı oldukça kritiktir. Bu özellik, yazı tipi yüklenene kadar tarayıcının sistem fontunu göstermesini sağlar ve "Görünür İçerik Kayması" (CLS) sorununu önleyerek SEO performansınızı artırır.

Adım 3: PHP ile Yazı Tipini Kuyruğa Ekleme

CSS dosyanızın düzgün yüklendiğinden emin olmak için PHP'nin wp_enqueue_style fonksiyonunu kullanmalısınız. Bu, WordPress'in kaynakları yönetme biçimidir ve çakışmaları önler.

function ozel_fontlari_yukle() {
    wp_enqueue_style('ozel-font-stili', get_stylesheet_directory_uri() . '/css/font-tanimlamalari.css');
}
add_action('wp_enqueue_scripts', 'ozel_fontlari_yukle');

Bu kod, temanızın fonksiyon dosyasında (functions.php) çalışır. Harici bir CSS dosyasında font tanımlarınızı tutmak, sitenizin bakımını kolaylaştırır ve kodunuzu modüler tutar.

Adım 4: Yazı Tipini Stil Dosyasında Uygulama

Fontu tanımladık ve sisteme tanıttık. Şimdi sıra bu fontu sitenin belirli bölümlerine atamaya geldi. CSS içerisinde font-family özelliğini kullanarak istediğiniz HTML elementine atama yapabilirsiniz.

body {
    font-family: 'MarkamınFontu', sans-serif;
}

h1, h2, h3 {
    font-family: 'MarkamınFontu', serif;
    font-weight: 700;
}

Burada sans-serif gibi bir yedek font (fallback) tanımlamak, yazı tipinin yüklenemediği durumlarda sitenizin okunabilir kalmasını sağlar.

Adım 5: Google Fonts Entegrasyonu (Alternatif Yöntem)

Eğer yerel dosyalar yerine Google Fonts kullanmak isterseniz, PHP üzerinden güvenli bir şekilde bu fontları çekebilirsiniz. Bu yöntem, fontların tarayıcı önbelleğinde saklanmasını sağlayarak hız kazandırır.

function google_fontlarini_ekle() {
    wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', false);
}
add_action('wp_enqueue_scripts', 'google_fontlarini_ekle');

Bu kod, Google'ın sunucularından fontu çeker ve display=swap parametresi ile performans optimizasyonu sağlar.

Yöntemlerin Karşılaştırması

Kritik Güvenlik Uyarısı: Sitenize yüklediğiniz tüm font dosyalarının lisanslı olduğundan emin olun. Ayrıca, functions.php dosyasında yaptığınız her değişiklikten önce dosyanın bir yedeğini alın. Hatalı bir PHP kodu sitenizin "Beyaz Ekran" (White Screen of Death) hatası vermesine neden olabilir.

Sıkça Sorulan Sorular

Özel yazı tipim neden görünmüyor?

Dosya yollarının doğruluğunu kontrol edin. Tarayıcı konsolunu (F12) açarak "Network" sekmesinden font dosyasının 404 hatası verip vermediğine bakın.

Tüm tarayıcılarda çalışması için hangi formatları kullanmalıyım?

Modern web için WOFF2 en iyi sıkıştırma oranına sahiptir. Eski tarayıcı desteği için WOFF formatını da yanına eklemeniz yeterlidir.

Yazı tipi boyutu SEO'yu etkiler mi?

Evet, çok büyük dosya boyutlu fontlar LCP (Largest Contentful Paint) değerini olumsuz etkiler. Font dosyalarınızı mutlaka optimize edin.

Eklenti kullanmak daha mı iyi?

Eklentiler kolaylık sağlar ancak sitenizi yavaşlatabilir. Kod ile yapmak her zaman daha temiz ve hızlı bir sonuç verir.

Font-display: swap nedir?

Yazı tipi yüklenene kadar tarayıcının sistem fontunu göstermesini sağlayan ve kullanıcı deneyimini iyileştiren bir CSS özelliğidir.

İleri Düzey Optimizasyon: Font Yükleme Stratejileri

Özel yazı tiplerini sitenize dahil ettikten sonra, tarayıcının bu dosyaları nasıl işlediğini optimize etmek, "Cumulative Layout Shift" (CLS) gibi temel web verilerini iyileştirmek için kritiktir. Fontların render edilme sürecini hızlandırmak için preload etiketlerini kullanmak en etkili yöntemlerden biridir.

Aşağıdaki PHP kodunu temanızın functions.php dosyasına ekleyerek, yazı tipi dosyalarınızın tarayıcı tarafından öncelikli olarak indirilmesini sağlayabilirsiniz:

add_action('wp_head', 'ozel_font_preload');
function ozel_font_preload() {
    echo '';
}

Font Alt Kümeleme (Subsetting) ile Dosya Boyutunu Küçültme

Birçok yazı tipi dosyası, kullanmadığınız dillerin karakterlerini (örneğin Kiril veya Yunanca karakter setleri) içerir. Bu durum dosya boyutunu gereksiz yere artırır. Font dosyalarınızı sunucuya yüklemeden önce FontForge veya Glyphter gibi araçlarla sadece "Latin" veya "Turkish" karakter setini içeren alt kümeler oluşturarak dosya boyutunu %70'e varan oranlarda düşürebilirsiniz.

Hata Ayıklama ve Tarayıcı Konsolu Kontrolleri

Yazı tipleriniz düzgün yüklenmediğinde veya tarayıcı tarafından reddedildiğinde, sorunu tespit etmek için tarayıcınızın "Geliştirici Araçları" (F12) panelini kullanmalısınız. Özellikle "Network" sekmesi, yazı tipi dosyalarınızın 404 hatası verip vermediğini veya CORS (Cross-Origin Resource Sharing) engeline takılıp takılmadığını görmenizi sağlar.

CORS Sorunlarını Çözme

Eğer yazı tipleriniz bir CDN üzerinden yükleniyorsa veya farklı bir alt alan adında barındırılıyorsa, tarayıcı güvenlik nedeniyle fontları yüklemeyebilir. Bu durumda .htaccess dosyanıza aşağıdaki kuralları ekleyerek gerekli izinleri tanımlamanız gerekebilir:

  
    Header set Access-Control-Allow-Origin "*"
  

Performans Testi İçin Kontrol Listesi

• Dosya Formatı: WOFF2 formatının öncelikli olduğundan emin olun (en yüksek sıkıştırma oranı).
• Gzip/Brotli Sıkıştırma: Sunucunuzda font dosyaları için sıkıştırmanın aktif olduğunu doğrulayın.
• Cache Süresi: .htaccess üzerinden font dosyalarına en az 1 yıllık "Expires" başlığı ekleyin.
• Fout/Foit Kontrolü: font-display: swap kullanımının görsel geçişi yumuşatıp yumuşatmadığını test edin.

Bu ileri düzey teknikler, sitenizin sadece şık görünmesini sağlamakla kalmaz, aynı zamanda Google'ın çekirdek web metrikleri (Core Web Vitals) kriterlerine tam uyum sağlamasına yardımcı olur.

Sonuç

WordPress ile özel yazı tipi tanımlama süreci, başlangıçta karmaşık görünse de, yukarıdaki adımları takip ettiğinizde sitenizin performansını ve tasarım kalitesini ciddi oranda artırabileceğiniz bir süreçtir. Yerel font kullanımı, sitenizi dış bağımlılıklardan kurtararak daha profesyonel bir yapı oluşturmanıza yardımcı olur.

Bir sonraki adım olarak, font yükleme sürelerini daha da kısaltmak için preconnect etiketlerini kullanarak font servislerine ön bağlantı kurmayı deneyebilirsiniz. Kodlarınızın her zaman güncel olduğundan emin olun ve düzenli olarak site hızınızı PageSpeed Insights üzerinden test etmeyi unutmayın.