Wordpress İle Özel Bir Yazı Tipi Entegrasyonu Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Özel bir yazı tipi entegrasyonuna başlamadan önce, projenizin teknik altyapısının hazır olduğundan emin olmalısınız. WordPress üzerinde font yönetimi yaparken dikkat etmeniz gereken temel noktalar şunlardır:

• Tema Erişimi: FTP/SFTP erişimi veya WordPress yönetici panelindeki "Tema Dosya Düzenleyici"ye erişiminiz olmalıdır.
• Font Dosyaları: Web için optimize edilmiş .woff2 ve .woff formatındaki yazı tipi dosyalarınız elinizde bulunmalıdır.
• Alt Tema (Child Theme): Değişikliklerinizi mutlaka bir alt tema içerisinde yapmalısınız; aksi takdirde tema güncellemelerinde tüm özelleştirmeleriniz silinir.
• Yedekleme: Kod düzenlemelerine başlamadan önce mutlaka veritabanı ve dosya yedeği alınız.

Kritik Uyarı: Tema dosyalarınızda yapacağınız her türlü PHP değişikliği, hatalı yazım durumunda "Critical Error" (Kritik Hata) almanıza neden olabilir. Değişiklikleri yaparken her zaman bir FTP istemcisi ile dosyaları eski haline döndürebilecek durumda olduğunuzdan emin olun.

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

Özel yazı tiplerini sitenize dahil etmek için ilk adım, bu dosyaları temanızın dizinine taşımaktır. En iyi performans için wp-content/themes/tema-adiniz/assets/fonts/ gibi düzenli bir klasör yapısı kullanmanız önerilir.

Dosyalarınızı yükledikten sonra, dosya izinlerinin (CHMOD) doğru olduğundan emin olun. Genellikle klasörler 755, dosyalar ise 644 izin seviyesinde olmalıdır.

Adım 2: CSS ile Font Tanımlama (Font-Face)

Font dosyalarınızı sunucuya yükledikten sonra, tarayıcıların bu dosyaları tanıması için @font-face kuralını kullanmalıyız. Bu işlem, CSS dosyanızın en başında yer almalıdır.

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

Buradaki font-display: swap; parametresi, font yüklenene kadar sistemin yedek bir yazı tipini göstermesini sağlar. Bu, SEO performansı ve "Cumulative Layout Shift" (CLS) değerleri için hayati önem taşır.

Adım 3: WordPress functions.php ile Fontları Kuyruğa Alma

CSS dosyanızın doğru yüklendiğinden emin olmak için WordPress'in wp_enqueue_scripts kancasını (hook) kullanmalıyız. Bu yöntem, fontların ve ilgili stil dosyalarının doğru sırada yüklenmesini sağlar.

function tema_ozel_fontlari_yukle() {
    wp_enqueue_style( 'ana-stil', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'tema_ozel_fontlari_yukle' );

Bu kod bloğu, temanızın ana CSS dosyasını WordPress kuyruğuna ekler. Eğer font tanımlamalarını ayrı bir CSS dosyasında tutuyorsanız, aynı fonksiyon içerisine wp_enqueue_style( 'font-stilleri', get_template_directory_uri() . '/css/fonts.css' ); satırını ekleyerek bu dosyayı da dahil edebilirsiniz.

Adım 4: Fontları CSS Üzerinde Uygulama

Tanımladığınız yazı tipini sitenizin belirli bölümlerine uygulamak için CSS seçicilerini kullanmalısınız. Aşağıdaki örnekte, başlıklar ve gövde metinleri için nasıl tanımlama yapacağınızı görebilirsiniz.

body {
    font-family: 'OzelYaziTipi', sans-serif;
    color: #333;
}

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

Bu kod parçası, sitenizdeki tüm temel metinleri ve başlıkları özel yazı tipinizle günceller. sans-serif ifadesi, özel fontunuzun yüklenemediği durumlarda tarayıcının benzer bir fontu kullanmasını sağlayan bir geri dönüş (fallback) mekanizmasıdır.

Adım 5: Performans ve Güvenlik Optimizasyonu

Özel yazı tipi entegrasyonunda en sık yapılan hata, çok sayıda font varyasyonunu (bold, italic, light, thin) gereksiz yere yüklemektir. Sadece ihtiyacınız olan ağırlıkları kullanmak sitenizin hızını doğrudan etkiler.

Ayrıca, yazı tipi dosyalarınızın güvenliğini sağlamak için .htaccess dosyanıza şu kısıtlamayı ekleyerek hotlink (başka sitelerin sizin dosyalarınızı kullanması) koruması sağlayabilirsiniz:

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

Bu yapılandırma, yazı tipi dosyalarınızın tarayıcılar tarafından düzgün bir şekilde önbelleğe alınmasını sağlarken, CORS (Cross-Origin Resource Sharing) politikalarına uygunluk sağlar.

Karşılaştırma: Font Yükleme Yöntemleri

Güvenlik Sorumluluk Reddi: Bu makaledeki kod örnekleri genel bilgilendirme amaçlıdır. Uygulama öncesinde kodları kendi geliştirme ortamınızda test etmeniz, üretim (production) ortamında oluşabilecek hatalardan kaçınmanızı sağlar. Kodların yanlış uygulanması sitenizin tasarımını bozabilir veya erişilemez hale getirebilir.

Sıkça Sorulan Sorular

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

Genellikle dosya yolu hatası veya CSS önbelleği kaynaklıdır. Tarayıcı konsolunu (F12) açarak "Network" sekmesinden font dosyasının 404 hatası verip vermediğini kontrol edin.

Font-display: swap ne işe yarar?

Font dosyanız sunucudan indirilene kadar tarayıcının sistem fontunu göstermesini sağlar. Bu, metinlerin ilk yüklemede görünür olmasını sağlayarak kullanıcı deneyimini artırır.

Tüm tarayıcılarda çalışır mı?

Evet, .woff2 ve .woff formatlarını kullanmak, güncel tüm modern tarayıcılarla %99 uyumluluk sağlar.

Alt tema kullanmak zorunlu mu?

Evet, ana temanın dosyalarını doğrudan düzenlemek, tema güncellendiğinde tüm çalışmalarınızın silinmesine neden olur.

Birden fazla font kullanabilir miyim?

Evet, ancak performans için toplam dosya boyutunu 200-300KB altında tutmaya özen göstermelisiniz.

İleri Düzey Teknikler: Font Preloading ve Tarayıcı Önceliklendirme

Özel yazı tiplerini sitenize ekledikten sonra, tarayıcının bu dosyaları ne zaman ve hangi öncelikle indireceğini yönetmek, "Cumulative Layout Shift" (CLS) sorunlarını engellemek için kritiktir. preload etiketi, tarayıcıya CSS dosyası henüz işlenmeden yazı tipi dosyasını indirmeye başlamasını söyler.

Aşağıdaki kod bloğunu temanızın header.php dosyasında etiketleri arasına ekleyerek kritik yazı tiplerinizi önceliklendirebilirsiniz:

Bu yöntem, yazı tipinin "flash of unstyled text" (FOUT) olarak bilinen, sayfa yüklenirken yazı tipinin bir anlığına değişmesi sorununu minimize eder. Özellikle ana başlıklarınızda kullandığınız fontlar için bu yöntemi kullanmanız önerilir.

Font Yükleme Stratejileri ve Hata Ayıklama

Özel yazı tiplerinin tarayıcıda doğru görünmemesi genellikle yol (path) hatalarından veya CORS (Cross-Origin Resource Sharing) kısıtlamalarından kaynaklanır. Eğer yazı tiplerinizi bir CDN üzerinden veya farklı bir alt alan adından (subdomain) yüklüyorsanız, sunucunuzun .htaccess dosyasına şu izinleri eklemeniz gerekebilir:

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

Hata Ayıklama Adımları

• Ağ Sekmesini Kontrol Edin: Tarayıcınızın Geliştirici Araçları (F12) > Network sekmesine gidin ve "Font" filtresini seçin. Dosyaların 200 (OK) durum koduyla gelip gelmediğini doğrulayın.
• Konsol Hataları: "CORS policy" hatası alıyorsanız, yukarıdaki .htaccess yapılandırmasını uyguladığınızdan emin olun.
• CSS Sözdizimi: @font-face içerisindeki src tanımlamalarında tırnak işaretlerinin ve dosya yollarının (göreli veya mutlak) doğruluğunu kontrol edin.

Ayrıca, yazı tipi dosyalarınızın boyutunu optimize etmek için subsetting (alt kümeleme) yöntemini kullanabilirsiniz. Örneğin, Türkçe karakter desteği içermeyen bir yazı tipini tüm karakter setiyle yüklemek yerine, sadece Latin-1 karakterlerini içeren bir sürümünü oluşturarak dosya boyutunu %70'e varan oranlarda düşürebilirsiniz. Bu işlem için FontForge veya Transfonter gibi araçlar kullanılabilir.

Sonuç

WordPress ile özel yazı tipi entegrasyonu yapmak, sitenizin estetik kalitesini artırırken aynı zamanda markanızın dijital dünyadaki duruşunu profesyonelleştirir. Bu rehberde öğrendiğiniz @font-face kullanımı, functions.php ile dosya yönetimi ve performans optimizasyonları, modern bir WordPress geliştiricisi için temel yetkinliklerdir. Bir sonraki adım olarak, yazı tiplerinizin yüklenme sürelerini Google PageSpeed Insights üzerinden analiz ederek, gerekirse "Preload" (Ön yükleme) tekniklerini araştırabilirsiniz.