Wordpress İle Özel Bir Çoklu Yazı Tipi Yükleme Sistemi Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu sistemi kurmaya başlamadan önce, çalışma ortamınızın güncel olduğundan emin olmalısınız. WordPress 6.0 ve üzeri sürümlerde gelen "Webfonts API" yapısı, artık fontları daha performanslı yönetmemize olanak tanıyor.

• WordPress 6.4 veya daha güncel bir sürüm (Webfonts API desteği için).
• Aktif bir alt tema (Child Theme) dosyası. Asla ana tema dosyalarını doğrudan değiştirmeyin.
• FTP/SFTP erişimi veya bir kod editörü (VS Code gibi).
• Yükleyeceğiniz yazı tiplerinin .woff2 formatında olması (En yüksek sıkıştırma ve tarayıcı desteği için).

Adım 1: Yazı Tipi Dosyalarını Hazırlama ve Yükleme

Özel yazı tiplerini sitenize eklemeden önce, dosyalarınızı optimize etmeniz gerekir. .ttf veya .otf dosyaları yerine .woff2 formatını kullanmak, sayfa yüklenme sürenizi %30'a kadar iyileştirebilir. Dosyalarınızı temanızın içerisindeki assets/fonts/ klasörüne yükleyin.

Klasör yapınız şu şekilde olmalıdır:

/wp-content/themes/tema-adiniz/assets/fonts/
    - font-adi-regular.woff2
    - font-adi-bold.woff2
    - font-adi-italic.woff2

Adım 2: PHP ile Özel Yazı Tiplerini Kaydetme

WordPress'in modern font yönetimini kullanmak için functions.php dosyanızda wp_register_webfonts fonksiyonunu kullanacağız. Bu yöntem, fontların render edilmeden önce tarayıcı tarafından öncelikli olarak yüklenmesini sağlar.

function tema_ozel_fontlari_yukle() {
    wp_register_webfonts( array(
        array(
            'font-family'  => 'OzelFont',
            'font-style'   => 'normal',
            'font-weight'  => '400',
            'src'          => get_template_directory_uri() . '/assets/fonts/font-adi-regular.woff2',
        ),
        array(
            'font-family'  => 'OzelFont',
            'font-style'   => 'normal',
            'font-weight'  => '700',
            'src'          => get_template_directory_uri() . '/assets/fonts/font-adi-bold.woff2',
        ),
    ) );
}
add_action( 'wp_enqueue_scripts', 'tema_ozel_fontlari_yukle' );

Yukarıdaki kod, WordPress'e "OzelFont" adında bir font ailesi olduğunu ve bunun hangi dosyalardan yükleneceğini bildirir. wp_enqueue_scripts kancası (hook), fontların doğru zamanda yüklenmesini garanti eder.

Adım 3: CSS ile Yazı Tiplerini Tanımlama

PHP ile kaydettiğimiz fontları, artık CSS dosyamızda kullanabiliriz. WordPress, @font-face kurallarını otomatik olarak işleyebilse de, CSS'inizde bu fontları global olarak tanımlamak en sağlıklı yöntemdir.

/* style.css içerisinde */
body {
    font-family: 'OzelFont', sans-serif;
    font-weight: 400;
}

h1, h2, h3 {
    font-family: 'OzelFont', sans-serif;
    font-weight: 700;
}

Bu tanımlama, sitenizdeki tüm metinlerin yüklediğiniz özel fontu kullanmasını sağlar. Eğer sadece belirli alanlarda kullanmak isterseniz, CSS sınıflarını (class) spesifik olarak hedefleyebilirsiniz.

Adım 4: Performans ve Optimizasyon Karşılaştırması

Yazı tipi yükleme yöntemlerini performans ve yönetim kolaylığı açısından karşılaştıralım.

Adım 5: Güvenlik ve Hata Ayıklama

Kritik Uyarı: Font dosyalarınızı yüklerken sunucu izinlerini (permissions) kontrol edin. Yazı tipi dosyaları genellikle 644 izni ile tutulmalıdır. Ayrıca, dış kaynaklı (üçüncü taraf) font dosyalarını asla doğrudan URL üzerinden çekmeyin; bu, XSS (Cross-Site Scripting) saldırılarına veya veri gizliliği ihlallerine yol açabilir.

Eğer fontlarınız yüklenmiyorsa, tarayıcınızın "Geliştirici Araçları" (F12) -> "Network" sekmesini kontrol edin. Dosya yollarının doğru olduğundan ve 404 hatası almadığınızdan emin olun.

// Hata ayıklama için dosya yolunu kontrol etme
if ( !file_exists( get_template_directory() . '/assets/fonts/font-adi-regular.woff2' ) ) {
    error_log( 'Hata: Font dosyası bulunamadı!' );
}

Adım 6: Çoklu Yazı Tipi Yönetim Sistemi

Sisteminizde birden fazla font ailesi kullanmak istiyorsanız, dizileri (array) genişletmeniz yeterlidir. Aşağıdaki örnek, projenizde birden fazla fontu nasıl organize edeceğinizi gösterir.

function tema_coklu_font_kaydi() {
    $fontlar = array(
        array( 'font-family' => 'BaslikFont', 'src' => 'baslik.woff2' ),
        array( 'font-family' => 'GovdeFont', 'src' => 'govde.woff2' )
    );

    foreach ( $fontlar as $font ) {
        wp_register_webfonts( array( $font ) );
    }
}
add_action( 'wp_enqueue_scripts', 'tema_coklu_font_kaydi' );

Sıkça Sorulan Sorular

Özel fontlar SEO'yu etkiler mi?

Evet, olumlu etkiler. Yerel olarak barındırılan fontlar, Google Fonts gibi dış servislerden gelen istekleri azaltır ve "Largest Contentful Paint" (LCP) skorunuzu iyileştirir.

Neden .woff2 kullanmalıyım?

Diğer formatlara göre çok daha küçük boyutludur ve modern tarayıcıların tamamı tarafından desteklenir.

Fontlar mobilde düzgün görünmüyor, ne yapmalıyım?

CSS içerisinde font-display: swap; özelliğini kullanarak, font yüklenene kadar sistem fontunun görünmesini sağlayabilirsiniz.

Eklenti kullanmak daha kolay değil mi?

Eklentiler kurulumu kolaylaştırır ancak sitenize gereksiz kod yükü bindirir. Profesyonel projelerde kod ile yönetim her zaman daha sürdürülebilirdir.

Font dosyalarım neden yüklenmiyor?

Dosya yollarını get_template_directory_uri() ile tanımladığınızdan emin olun. Yanlış dizin kullanımı dosyanın bulunamamasına neden olur.

Yasal Uyarı: Bu rehberdeki kodlar, eğitim amaçlıdır. Uygulama öncesinde mutlaka sitenizin tam yedeğini alın. Kodların yanlış yapılandırılması sitenizin görsel düzeninin bozulmasına neden olabilir. Teknik değişiklikleri her zaman bir "staging" (test) ortamında deneyin.

Özel Yazı Tipi Yönetiminde İleri Düzey Stratejiler

Özel yazı tipi sisteminizi kurduktan sonra, bu sistemin ölçeklenebilirliğini artırmak ve tarayıcı önbellekleme mekanizmalarını optimize etmek kritik öneme sahiptir. Özellikle çok dilli (multilingual) sitelerde, yazı tipi dosyalarının boyutunu küçültmek için subsetting (alt kümeleme) yöntemini kullanmanız önerilir. Bu yöntem, sadece kullandığınız karakterleri (örneğin sadece Türkçe karakterleri) içeren font dosyaları oluşturmanıza olanak tanır.

Font-Display Stratejisi ile Render Performansını Artırma

Yazı tiplerinin yüklenme süreci, tarayıcının metni gizlemesine (FOIT - Flash of Invisible Text) veya yanlış yazı tipiyle göstermesine (FOUT - Flash of Unstyled Text) neden olabilir. Bunu engellemek için font-display: swap; özelliğini CSS dosyanızda şu şekilde yapılandırmalısınız:

@font-face {
    font-family: 'MarkaFontu';
    src: url('/wp-content/uploads/fonts/marka-font.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* Metnin anında görünmesini sağlar */
}

Bu yapılandırma, font dosyası indirilene kadar tarayıcının sistem fontunu kullanmasını, indirme tamamlandığında ise otomatik olarak özel fonta geçmesini sağlar. Bu, kullanıcı deneyimi (UX) ve Google Core Web Vitals skorlarınız için oldukça kritiktir.

Ölçeklenebilir Yazı Tipi Dağıtımı ve CDN Entegrasyonu

Eğer siteniz yüksek trafik alıyorsa, yazı tipi dosyalarını WordPress sunucunuzda tutmak yerine bir CDN (Content Delivery Network) üzerinde barındırmak, sunucu yükünüzü azaltacaktır. Ancak, CDN kullanırken dikkat etmeniz gereken en önemli konu CORS (Cross-Origin Resource Sharing) başlıklarıdır. Tarayıcılar, farklı bir alandan gelen yazı tipi dosyalarını güvenlik gerekçesiyle reddedebilir.

CDN üzerinden font sunarken, .htaccess dosyanıza veya Nginx yapılandırmanıza şu kuralları ekleyerek font dosyalarına erişim izni vermelisiniz:

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

Test ve Doğrulama Süreçleri

Sisteminizi canlıya almadan önce farklı tarayıcı ve cihazlarda test etmeniz gerekir. Özellikle "Network" sekmesini kullanarak font dosyalarınızın 200 OK durum koduyla gelip gelmediğini ve Cache-Control başlıklarının doğru ayarlanıp ayarlanmadığını kontrol edin. Aşağıdaki tablo, font optimizasyonunda dikkat etmeniz gereken temel metrikleri göstermektedir:

Bu ileri seviye yapılandırmalar, sadece estetik bir iyileştirme değil, aynı zamanda teknik bir altyapı güçlendirmesidir. Yerel barındırma yöntemini doğru bir önbellekleme politikasıyla birleştirdiğinizde, Google Fonts gibi dış servislerden bağımsız, tamamen kendi kontrolünüzde olan yüksek performanslı bir tipografi sistemine sahip olursunuz.

Sonuç

WordPress ile özel bir çoklu yazı tipi yükleme sistemi oluşturmak, sitenizin hızını ve özgünlüğünü artırmanın en etkili yoludur. Bu rehberde öğrendiğiniz Webfonts API kullanımı ve yerel dosya yönetimi sayesinde, artık sitenizin tipografisini tamamen kontrol edebilirsiniz. Bir sonraki adım olarak, bu fontları WordPress "Customizer" (Özelleştirici) paneline ekleyerek, kod yazmadan fontları değiştirilebilir hale getiren bir arayüz geliştirmeyi deneyebilirsiniz.