WordPress Web Sitesine Google Fontları Nasıl Eklenir?

Google Fontları, kullanıcıya geniş bir yazı tipi yelpazesi sunar ve WordPress sitenize modern ve profesyonel bir görünüm katmanın harika bir yoludur. Bu makalede, Google Fontları’nı WordPress web sitenize nasıl entegre edeceğinizi ve kullanacağınızı detaylı bir şekilde ele alacağız.

Google Fontları Neden Tercih Edilmeli?

Google Fontları, web tasarımında yaygın olarak kullanılmasının birkaç nedeni vardır:

• Geniş Seçenek: Google, 1000’den fazla ücretsiz yazı tipini sunar.
• Hızlı Yükleme: Google’ın CDN ağı sayesinde fontlar hızlı yüklenir.
• SEO Dostu: Google Fontları, web sitenizin hızını olumsuz etkilemeden kullanılabilir.
• Kullanım Kolaylığı: Google Fontları’nı entegre etmek oldukça basittir.

Google Fontları WordPress’e Entegre Etme Yöntemleri

a. Google Fonts Web Sitesi Üzerinden Doğrudan Entegrasyon

Font Seçimi: Google Fonts sitesine gidin ve kullanmak istediğiniz fontları seçin. Bir fontu seçtikten sonra, ekranın sağ alt köşesinde “View Selected Families” butonuna tıklayın. “Embed” sekmesinde size iki seçenek sunulacaktır: HTML ve CSS. İlk adımda HTML seçeneğindeki <link> etiketini kopyalayın.

Kopyaladığınız Kodu WordPress’e Ekleyin: WordPress admin paneline giriş yapın. Görünüm > Tema Düzenleyici (Appearance > Theme Editor) bölümüne gidin. header.php dosyasını bulun ve </head> etiketinden hemen önce kopyaladığınız <link> etiketini ekleyin.

CSS’te Fontu Kullanma: Fontu CSS’de kullanmak için aşağıdaki gibi CSS kodlarını ekleyin:

body {
    font-family: 'Roboto', sans-serif;
}

b. Eklenti ile Google Fontları Eklemek

Eklentiler, kod yazmadan Google Fontları sitenize entegre etmenin daha kolay bir yoludur.

Easy Google Fonts Eklentisi: WordPress kontrol panelinizden Eklentiler > Yeni Ekle (Plugins > Add New) bölümüne gidin. “Easy Google Fonts” eklentisini aratın ve yükleyip etkinleştirin. Eklenti etkinleştirildikten sonra, Görünüm > Özelleştir (Appearance > Customize) kısmına gidin. Burada “Typography” sekmesinde Google Fontları’nı kolayca seçebilir ve kullanabilirsiniz.

Google Fonts Typography Eklentisi: Bir diğer popüler eklenti Google Fonts Typography’dir. Eklentiyi yükledikten sonra, kontrol panelinde “Typography” sekmesinden dilediğiniz fontları seçip, çeşitli stil ayarlarını yapabilirsiniz.

c. Functions.php Dosyası Üzerinden Google Fontları Eklemek

Kodlarla uğraşmayı sevenler için bu yöntem de oldukça popülerdir.

Font Linkini Ekleyin: Kullandığınız temanın functions.php dosyasına gidin. Aşağıdaki kodu bu dosyaya ekleyerek Google Fontları’nı dahil edebilirsiniz:

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

Fontu CSS’te Kullanın: Artık fontlarınız entegre edildi, style.css dosyanızda aşağıdaki gibi kullanabilirsiniz:

body {
    font-family: 'Roboto', sans-serif;
}

SEO ve Performans Açısından Google Fontları Optimizasyonu

Google Fontları sitenize eklerken sitenizin hızını ve SEO’sunu optimize etmek için şu adımları takip edebilirsiniz:

1. Font Ağırlıklarını Dikkatli Seçin: Gereksiz font ağırlıklarını kullanmaktan kaçının. Eğer yalnızca normal ve bold kullanıyorsanız, diğer ağırlıkları yüklemek performansınızı düşürebilir.
2. Önbellekleme: Google Fontları’nı sitenizde önbellekleme ile kullanarak performansı artırabilirsiniz. Bu, fontların tekrar tekrar indirilmesini engeller.
3. Yerel Font Barındırma: Fontları yerel olarak barındırmak, bazı durumlarda performans açısından daha iyi olabilir. Bunun için font dosyalarını indirip sitenize yükleyebilir ve CSS üzerinden kullanabilirsiniz.

Sık Karşılaşılan Sorunlar ve Çözümleri

1. Fontlar Görünmüyor: Eğer fontlarınız yüklenmiyorsa, font dosyasını doğru şekilde dahil edip etmediğinizi kontrol edin. Ayrıca, temanızın header.php dosyasını doğru düzenlediğinizden emin olun.
2. Yavaş Yüklenme: Eğer fontlar yavaş yükleniyorsa, fazla sayıda font ağırlığı kullanıp kullanmadığınızı kontrol edin. Performans açısından yalnızca ihtiyaç duyduğunuz ağırlıkları seçmelisiniz.
3. Uyumsuzluk Sorunları: Bazı eski tarayıcılar Google Fontları’nı desteklemeyebilir. Bu durumda bir “font stack” kullanarak alternatif fontları yedek olarak belirleyebilirsiniz.

Değerlendirme

Google Fontları, WordPress sitenize profesyonel bir görünüm katmanın yanı sıra kolayca uygulanabilen ve zengin bir tasarım deneyimi sunan harika bir araçtır. Yalnızca birkaç adımda temanızın tarzını değiştirebilir, yazı tiplerini daha etkili bir şekilde kullanabilirsiniz. Hangi yöntemi seçerseniz seçin, dikkat etmeniz gereken en önemli nokta sitenizin hızını ve performansını göz önünde bulundurmak olmalıdır.

Bu adımları takip ederek WordPress sitenize kolayca Google Fontları ekleyebilir ve tasarımınızı daha estetik hale getirebilirsiniz.