Google Fonts’u Yerel Sunucudan Yükleme: WordPress functions.php Rehberi

Tarafındankomut
0 Comments

Google Fonts harika bir kaynak, bunu kimse inkar edemez. Yüzlerce font, ücretsiz, kolayca entegre edilebilir. Ama bir WordPress sitesi yönetiyorsan ve performans, gizlilik ya da GDPR uyumu gibi konular seni ilgilendiriyorsa, Google’ın sunucularından font yüklemek ciddi bir sorun haline gelebilir. Hem ziyaretçinin tarayıcısı Google’a istek atmak zorunda kalıyor, hem sayfa yüklenme süresi uzuyor, hem de Avrupa’daki kullanıcılar için veri koruma mevzuatı açısından risk oluşuyor. Çözüm basit: Google Fonts’u kendi sunucundan yükle.

Bu yazıda WordPress functions.php üzerinden Google Fonts’u tamamen yerel sunucudan nasıl sunacağını, mevcut tema fontlarını nasıl kaldırıp kendi eklediğin fontlarla değiştireceğini ve bütün bu süreci production ortamında nasıl düzgünce yöneteceğini ele alacağız.

Neden Google Fonts’u Yerel Sunucudan Yüklemeliyiz?

Önce “neden” sorusunu netleştirelim. Bir WordPress sitesi kurduğunda, tema veya eklentiler büyük ihtimalle Google Fonts bağlantıları ekliyor. Bu bağlantılar şuna benziyor:

https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap

Bu URL’nin çağrılması birkaç soruna yol açıyor:

  • Performans: Kullanıcı tarayıcısı Google sunucularına ayrı bir DNS sorgusu yapıyor, bağlantı kuruyor ve font dosyasını indiriyor. Bu ekstra round-trip süresi sayfa yüklenme zamanını artırıyor.
  • GDPR/Gizlilik: Almanya’da Ocak 2022’de verilen mahkeme kararına göre, ziyaretçi onayı alınmadan Google Fonts kullanmak GDPR ihlali sayılabiliyor. Bu karar tüm AB’yi etkiliyor.
  • Önbellekleme kontrolü: Google’ın cache başlıklarına mahkum oluyorsun. Kendi sunucundan sunarsan cache politikasını kendin belirliyorsun.
  • Bağımsızlık: Google Fonts servisi çökse ya da yavaşlasa, siten de yavaşlıyor.

Yerel sunucudan yükleyince tüm bu sorunları tek hamlede çözüyorsun.

Google Fonts Dosyalarını İndirme

İlk adım font dosyalarını indirmek. Bunun için birkaç yöntem var.

google-webfonts-helper Kullanımı

En pratik yol google-webfonts-helper sitesini kullanmak. Adres: gwfh.mranftl.com

Bu araç sana hem CSS kodunu hem de font dosyalarını hazır paket olarak veriyor. Şöyle kullanıyorsun:

  • Sitede istediğin fontu arama
  • Hangi ağırlıkları (weight) istediğini seçme
  • “Modern Browsers” veya “Best Support” seçeneğini belirleme
  • Zip dosyasını indirme

İndirdiğinde .woff ve .woff2 uzantılı dosyalar geliyor. Bunları temanın içine taşıyacağız.

Manuel İndirme Yöntemi

Eğer araç kullanmak istemiyorsan, fontu CSS API üzerinden çekip içindeki URL’leri takip edebilirsin:

# Roboto fontunu curl ile çek, font URL'lerini görmek için
curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" 
  "https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"

Bu komut sana CSS çıktısı verecek. İçindeki src: url(...) satırlarındaki .woff2 dosyalarını tek tek indirebilirsin:

# Örnek font dosyasını indir
wget -O roboto-400.woff2 
  "https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2"

Dosya Yapısını Organize Etme

Font dosyalarını temanın içine düzenli bir şekilde yerleştirmek önemli. Ben genellikle şu yapıyı kullanıyorum:

# Tema dizinine font klasörü oluştur
mkdir -p /var/www/html/wp-content/themes/senin-teman/assets/fonts/roboto

# Font dosyalarını kopyala
cp roboto-400.woff2 /var/www/html/wp-content/themes/senin-teman/assets/fonts/roboto/
cp roboto-400.woff /var/www/html/wp-content/themes/senin-teman/assets/fonts/roboto/
cp roboto-700.woff2 /var/www/html/wp-content/themes/senin-teman/assets/fonts/roboto/
cp roboto-700.woff /var/www/html/wp-content/themes/senin-teman/assets/fonts/roboto/
# Dosya izinlerini kontrol et
ls -la /var/www/html/wp-content/themes/senin-teman/assets/fonts/roboto/
# Web sunucusu bu dosyaları okuyabilmeli
chmod 644 /var/www/html/wp-content/themes/senin-teman/assets/fonts/roboto/*.woff2

CSS Dosyası Oluşturma

Font dosyalarını yerleştirdikten sonra, bunları tanımlayan bir CSS dosyası oluşturman gerekiyor. Bu dosyayı assets/css/local-fonts.css olarak kaydedebilirsin:

cat > /var/www/html/wp-content/themes/senin-teman/assets/css/local-fonts.css << 'EOF'
/* Roboto Regular */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto/roboto-400.woff2') format('woff2'),
       url('../fonts/roboto/roboto-400.woff') format('woff');
}

/* Roboto Bold */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/roboto/roboto-700.woff2') format('woff2'),
       url('../fonts/roboto/roboto-700.woff') format('woff');
}
EOF

Burada font-display: swap önemli bir detay. Bu değer, font yüklenene kadar tarayıcının sistem fontunu kullanmasını, font hazır olunca geçiş yapmasını sağlıyor. Sayfa boş gözükmüyor, kullanıcı deneyimi daha iyi oluyor.

functions.php’ye Google Fonts’u Kaldırma Kodu Ekleme

Şimdi işin WordPress kısmına geliyoruz. functions.php üzerinden hem mevcut Google Fonts bağlantılarını kaldıracağız hem de yerel fontları ekleyeceğiz.

Önce temel yaklaşımı görelim:

<?php
/**
 * Google Fonts'u kaldır ve yerel fontları ekle
 */

// 1. Mevcut Google Fonts stylesheet'lerini kaldır
function remove_google_fonts() {
    // Yaygın Google Fonts handle'ları
    $google_font_handles = array(
        'google-fonts',
        'googlefonts',
        'google_fonts',
        'fonts-google',
    );
    
    foreach ( $google_font_handles as $handle ) {
        wp_dequeue_style( $handle );
        wp_deregister_style( $handle );
    }
}
add_action( 'wp_enqueue_scripts', 'remove_google_fonts', 20 );
add_action( 'admin_enqueue_scripts', 'remove_google_fonts', 20 );

// 2. Yerel fontları kaydet ve yükle
function enqueue_local_fonts() {
    wp_enqueue_style(
        'local-fonts',
        get_template_directory_uri() . '/assets/css/local-fonts.css',
        array(),
        '1.0.0'
    );
}
add_action( 'wp_enqueue_scripts', 'enqueue_local_fonts' );

Bu temel yapıdır ama pratikte yeterli olmayabilir. Çünkü her tema ve eklenti Google Fonts’u farklı handle ismiyle kaydedebiliyor.

Kapsamlı Google Fonts Engelleme Yaklaşımı

Daha agresif ve güvenilir bir yaklaşım için, yüklenen tüm stilleri kontrol edip Google Fonts URL’si içerenleri tespit etmek gerekiyor:

<?php
/**
 * Tüm Google Fonts stylesheet'lerini URL'ye göre tespit edip kaldır
 */
function dequeue_all_google_fonts() {
    global $wp_styles;
    
    if ( ! isset( $wp_styles->queue ) ) {
        return;
    }
    
    foreach ( $wp_styles->queue as $handle ) {
        if ( ! isset( $wp_styles->registered[ $handle ] ) ) {
            continue;
        }
        
        $style_src = $wp_styles->registered[ $handle ]->src;
        
        // Google Fonts URL'si içeriyorsa kaldır
        if ( strpos( $style_src, 'fonts.googleapis.com' ) !== false ||
             strpos( $style_src, 'fonts.gstatic.com' ) !== false ) {
            wp_dequeue_style( $handle );
            wp_deregister_style( $handle );
            
            // Debug için log tut (geliştirme aşamasında)
            if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) {
                error_log( 'Google Fonts kaldırıldı: ' . $handle . ' - ' . $style_src );
            }
        }
    }
}
add_action( 'wp_enqueue_scripts', 'dequeue_all_google_fonts', 100 );
add_action( 'admin_enqueue_scripts', 'dequeue_all_google_fonts', 100 );
add_action( 'wp_print_styles', 'dequeue_all_google_fonts', 100 );

Burada priority değeri olarak 100 kullandım. Bu, diğer tema ve eklentilerin fontları eklemesini bekleyip sonra hepsini kaldırıyor.

Çocuk Tema Kullanıyorsan

Eğer child theme (çocuk tema) kullanıyorsan ve parent temadan gelen fontları kaldırmak istiyorsan, biraz daha dikkatli olmak gerekiyor:

<?php
/**
 * Parent tema Google Fonts'unu kaldır, child tema yerel fontlarını ekle
 */

// Parent tema fontu kaldır
function remove_parent_theme_google_fonts() {
    // Twenty Twenty-One örneği
    wp_dequeue_style( 'twenty-twenty-one-fonts' );
    wp_deregister_style( 'twenty-twenty-one-fonts' );
    
    // Astra tema örneği
    wp_dequeue_style( 'astra-google-fonts' );
    wp_deregister_style( 'astra-google-fonts' );
    
    // OceanWP tema örneği
    wp_dequeue_style( 'oceanwp-google-fonts' );
    wp_deregister_style( 'oceanwp-google-fonts' );
}
add_action( 'wp_enqueue_scripts', 'remove_parent_theme_google_fonts', 20 );

// Child tema dizininden yerel fontları yükle
function enqueue_child_theme_local_fonts() {
    // Child tema varsa onun dizinini, yoksa parent'ı kullan
    $theme_dir_uri = get_stylesheet_directory_uri();
    
    wp_enqueue_style(
        'child-local-fonts',
        $theme_dir_uri . '/assets/css/local-fonts.css',
        array(),
        wp_get_theme()->get( 'Version' )
    );
}
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_local_fonts', 25 );

WooCommerce Sayfaları İçin Özel Durum

WooCommerce bazı sayfalarda kendi font yüklemelerini yapabiliyor. Ayrıca checkout sayfasında performans kritik olduğu için fontların hızlı yüklenmesi önemli:

<?php
/**
 * WooCommerce sayfaları için optimize edilmiş font yükleme
 */
function enqueue_woo_optimized_fonts() {
    // Önce Google Fonts'u engelle
    add_filter( 'style_loader_src', 'block_google_fonts_filter', 10, 2 );
    
    // Yerel fontları yükle
    wp_enqueue_style(
        'local-fonts-woo',
        get_template_directory_uri() . '/assets/css/local-fonts.css',
        array(),
        '1.0.0'
    );
    
    // WooCommerce sayfalarında preload ekle
    if ( function_exists( 'is_woocommerce' ) && 
         ( is_woocommerce() || is_cart() || is_checkout() ) ) {
        add_action( 'wp_head', 'add_font_preload_links', 1 );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_woo_optimized_fonts', 50 );

function block_google_fonts_filter( $src, $handle ) {
    if ( strpos( $src, 'fonts.googleapis.com' ) !== false ) {
        return false; // False döndürmek yüklemeyi iptal eder
    }
    return $src;
}

function add_font_preload_links() {
    $font_url = get_template_directory_uri() . '/assets/fonts/roboto/';
    ?>
    <link rel="preload" 
          href="<?php echo esc_url( $font_url . 'roboto-400.woff2' ); ?>" 
          as="font" 
          type="font/woff2" 
          crossorigin="anonymous">
    <link rel="preload" 
          href="<?php echo esc_url( $font_url . 'roboto-700.woff2' ); ?>" 
          as="font" 
          type="font/woff2" 
          crossorigin="anonymous">
    <?php
}

link rel="preload" özellikle checkout gibi kritik sayfalarda çok işe yarıyor. Tarayıcı sayfayı işlemeye başlamadan fontları indirmeye başlıyor.

Gutenberg Editör İçin Font Yükleme

Sadece frontend’de değil, Gutenberg editöründe de yerel fontların görünmesini isteyebilirsin. Bunun için admin tarafına da ekleme yapman gerekiyor:

<?php
/**
 * Gutenberg editörde yerel font yükle
 */
function enqueue_local_fonts_for_editor() {
    wp_enqueue_style(
        'local-fonts-editor',
        get_template_directory_uri() . '/assets/css/local-fonts.css',
        array(),
        '1.0.0'
    );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_local_fonts_for_editor' );

/**
 * Editör için özel CSS ile fontu uygula
 */
function add_editor_font_styles() {
    $custom_css = "
        .editor-styles-wrapper,
        .editor-styles-wrapper p,
        .editor-styles-wrapper h1,
        .editor-styles-wrapper h2,
        .editor-styles-wrapper h3 {
            font-family: 'Roboto', sans-serif;
        }
    ";
    
    wp_add_inline_style( 'local-fonts-editor', $custom_css );
}
add_action( 'enqueue_block_editor_assets', 'add_editor_font_styles', 20 );

Nginx Tarafında Cache Ayarları

Font dosyalarını yerel sunucudan servis edince, Nginx üzerinde uzun süreli cache başlığı eklemek performansı daha da artırıyor:

# /etc/nginx/sites-available/siteniz.conf içine ekle
server {
    # ... mevcut ayarlar ...
    
    # Font dosyaları için uzun cache
    location ~* .(woff|woff2|ttf|otf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        add_header Access-Control-Allow-Origin "*";
        access_log off;
    }
}
# Nginx konfigürasyonunu test et ve yeniden yükle
nginx -t && systemctl reload nginx

Access-Control-Allow-Origin "*" satırı önemli. Font dosyaları cross-origin isteklerde sorun çıkarabilir, bu header bunu engelliyor.

Doğrulama ve Test

Her şeyi ayarladıktan sonra gerçekten çalışıp çalışmadığını kontrol etmen gerekiyor. Birkaç yöntem var:

Tarayıcı geliştirici araçları: Chrome DevTools’u aç, Network sekmesine git, “Font” filtresini seç ve sayfayı yenile. fonts.googleapis.com veya fonts.gstatic.com adresine istek gitmemeli. Bunun yerine kendi domain adresinden font dosyaları yükleniyor olmalı.

Komut satırından kontrol:

# Sitenin HTML çıktısında Google Fonts linki kalıp kalmadığını kontrol et
curl -s https://siteadresi.com | grep -i "fonts.googleapis"

# Eğer boş çıktı alıyorsan başarılı demektir
# Yerel font CSS'inin yüklendiğini doğrula
curl -s https://siteadresi.com | grep "local-fonts"

GTmetrix veya PageSpeed Insights üzerinden de kontrol edebilirsin. Google Fonts ile ilgili uyarılar artık çıkmamalı.

Yaygın Sorunlar ve Çözümleri

Fontlar hala Google’dan yükleniyor: Bu genellikle bir eklentiden kaynaklanıyor. dequeue_all_google_fonts fonksiyonundaki debug log’unu aktif ederek hangi handle’ın sorun çıkardığını tespit edebilirsin. PHP error log’unu şöyle izle:

tail -f /var/log/nginx/error.log
# veya
tail -f /var/www/html/wp-content/debug.log

Font dosyaları 404 veriyor: Dosya yollarını kontrol et. CSS içindeki göreli yollar bazen sorun çıkarabilir. Mutlak yol kullanmak daha güvenli:

# CSS dosyasında göreli yol yerine
url('../fonts/roboto/roboto-400.woff2')

# PHP'den dinamik yol oluştur ve inline CSS ile ekle
$font_url = get_template_directory_uri() . '/assets/fonts/roboto/roboto-400.woff2';

CORS hatası: Font dosyalarına başka bir domain üzerinden erişilmeye çalışılıyorsa CORS hatası alabilirsin. Nginx ayarındaki Access-Control-Allow-Origin header’ının eklendiğinden emin ol.

Hepsini Bir Arada Kullanan Tam functions.php Örneği

Tüm bu parçaları bir araya getiren temiz ve production’a hazır bir versiyon:

<?php
/**
 * Google Fonts'u Yerel Sunucudan Yükleme
 * Tüm kodları functions.php'ye ekle
 */

// ============================================
// 1. TÜM GOOGLE FONTS'u KALDIR
// ============================================
function wp_local_fonts_dequeue_google( $src, $handle ) {
    if ( strpos( $src, 'fonts.googleapis.com' ) !== false ||
         strpos( $src, 'fonts.gstatic.com' ) !== false ) {
        
        if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) {
            error_log( '[LocalFonts] Engellendi: ' . $handle );
        }
        return false;
    }
    return $src;
}
add_filter( 'style_loader_src', 'wp_local_fonts_dequeue_google', 100, 2 );

// ============================================
// 2. YEREL FONTLARI YÜKLE
// ============================================
function wp_enqueue_local_fonts() {
    wp_enqueue_style(
        'local-google-fonts',
        get_template_directory_uri() . '/assets/css/local-fonts.css',
        array(),
        '1.0.0'
    );
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_local_fonts', 5 );
add_action( 'enqueue_block_editor_assets', 'wp_enqueue_local_fonts', 5 );

// ============================================
// 3. KRİTİK SAYFALARDA PRELOAD EKLE
// ============================================
function wp_add_font_preload() {
    $fonts = array(
        'roboto-400.woff2',
        'roboto-700.woff2',
    );
    
    $font_base = get_template_directory_uri() . '/assets/fonts/roboto/';
    
    foreach ( $fonts as $font_file ) {
        printf(
            '<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin="anonymous">' . "n",
            esc_url( $font_base . $font_file )
        );
    }
}
add_action( 'wp_head', 'wp_add_font_preload', 1 );

Sonuç

Google Fonts’u yerel sunucudan yüklemek ilk bakışta karmaşık görünebilir ama adım adım gittiğinde oldukça yönetilebilir bir süreç. Özet olarak yapman gerekenler:

  • Font dosyalarını google-webfonts-helper gibi bir araçla indirip temana eklemek
  • @font-face tanımlamalarını içeren yerel bir CSS dosyası oluşturmak
  • functions.php‘de style_loader_src filtresiyle Google Fonts isteklerini kesmek
  • Yerel font CSS’ini doğru öncelikle kaydetmek
  • Nginx tarafında font dosyaları için uygun cache başlıklarını ayarlamak
  • link rel="preload" ile kritik sayfalarda font yüklenme süresini minimize etmek

Bu değişikliklerden sonra siten hem daha hızlı çalışacak, hem GDPR uyumluluğu açısından daha güvenli bir konuma gelecek, hem de harici bir servise bağımlılıktan kurtulacak. Google Fonts servisi çöküyor mu, yavaşlıyor mu? Artık seni ilgilendirmiyor. Fontların senin sunucunda, senin kontrolünde.

Production’a geçmeden önce staging ortamında test et, tarayıcı geliştirici araçlarıyla doğrula ve PageSpeed Insights’tan bir test daha çalıştır. Farkı göreceksin.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir