Google Fontları’nı WordPress’te yerel olarak barındırmanın bir yolunu mu arıyorsunuz? Google Fonts harika çünkü WordPress siteniz için bir dizi potansiyel font seçeneği sunuyor. Ancak aynı zamanda Google sunucularına bir sürü harici istekle de sonuçlanabilir, bu nedenle yazı tiplerini yalnızca yerel olarak barındırmayı tercih edebilirsiniz.
Bu gönderiyi “WordPress’te Google Fontları’nı Yerel Olarak Barındırma” şeklinde çerçevelemiş olsam da, size göstereceğim manuel yöntem aslında herhangi bir fontla çalışacaktır, bu nedenle hiçbir şekilde yalnızca Google Fonts ile sınırlı değilsiniz.
Bu manuel yöntemin ötesinde, Google Fonts’u yerel olarak barındırmayı kolaylaştıran bir eklenti de paylaşacağım. Ancak eklenti yalnızca Google Fonts ile çalışır, diğer fontlarla çalışmaz.
Yazı içeriği:
Neden Yazı Tiplerini Yerel Olarak Barındırmalısınız?
Aslında çoğu sitenin yazı tiplerini yerel olarak barındırması gerektiğini düşünmüyorum . Ancak bazı siteler için iyi bir seçenektir.
Öncelikle, fontları yerel olarak barındırmak, web’deki tüm font dünyasını açar. Bulduğunuz ve yasal haklarına sahip olduğunuz herhangi bir yazı tipini kullanabileceksiniz. Ve bu oldukça havalı!
Bunun ötesinde, yazı tiplerinizi barındıran sunucuya yönelik harici istekleri kesebildiğiniz için, yazı tiplerini yerel olarak barındırmanın bir performans artışı sağlaması mümkündür. Örneğin, test sitemdeki Pingdom Araçları şelalesinde bir yazı tipi için Google sunucularına yapılan harici isteği görebilirsiniz:
Yazı tiplerini yerel olarak barındırmak sitenizin her zaman daha hızlı yüklenmesini sağlayacağı anlamına gelmez.
Google Fonts’tan bahsederken, Google’ın sunucuları zaten oldukça hızlıdır ve Google Fonts’un hızlı global yükleme süreleri sağlamak için kendi CDN’i vardır. Ayrıca, özellikle Lato veya Roboto gibi popüler bir yazı tipi kullanıyorsanız, birinin tarayıcısında yazı tipi önbelleğe alınmış olabilir.
Temel olarak, yazı tiplerinizi yerel olarak barındırmanın gerçekten sitenizi hızlandırdığından emin olmak için sitenizi önce ve sonra test etmenizi öneririm.
Google Yazı Tiplerini WordPress’te Yerel Olarak Nasıl Barındırırsınız: Manuel Yöntem
Pekala, şimdi nasıl yapılır kısmına geçelim ve size Google Fonts’un WordPress’te yerel olarak nasıl barındırıldığını göstereceğim.
Unutmayın – Google Fonts’u örnek olarak kullanırken, bu manuel yöntem diğer tüm fontlarla da çalışacaktır .
1. Yazı Tipi Dosyasını İndirin
Başlamak için kullanmak istediğiniz yazı tipi dosyasını indirmeniz gerekir.
Google Fonts’ta Bu Fontu Seç bağlantısını tıklayabilirsiniz. Ardından indirme düğmesine tıklayın:
İndir düğmesini tıkladığınızda, Google Yazı Tipleri size tüm yazı tiplerinin çeşitli ağırlıklarından oluşan bir ZIP dosyası verecektir .
Ancak, yalnızca gereken minimum yazı tipi ağırlığını seçmenizi tavsiye ederim – her bir ağırlığı kullanmayın. İyi bir yığın şunlardan biridir:
- Düzenli
- İtalik
- Gözü pek
Bu nedenle, dosyayı çıkarın ve kullanmak istemediğiniz tüm yazı tiplerini silin:
2. WOFF Formatına Dönüştürün (Gerekirse)
Google Fonts’tan bir font indirdiğinizde size fontu TTF formatında verir. Tarayıcılar arası uyumluluğu sağlamak için okuduğum kaynakların çoğu WOFF veya WOFF 2.0 biçimlerinin kullanılmasını öneriyor gibi görünüyor.
Bu nedenle, seçtiğiniz yazı tipi zaten bu biçimde değilse, onu WOFF’a dönüştürmek için ücretsiz Convertio aracını kullanabilirsiniz:
3. Yazı Tipi Dosyalarını Sunucuya Yükleyin
Ardından, bu yazı tipi dosyalarını alın ve FTP veya cPanel Dosya Yöneticisi kullanarak sunucunuza yükleyin. Sunucunuza FTP aracılığıyla nasıl bağlanacağınızdan emin değilseniz , WordPress’te FTP’nin nasıl kullanılacağına ilişkin kılavuzumuza göz atın .
Yazı tipi dosyalarınızın bulunmasını kolaylaştırmak için bunları yazı tipleri adlı bir klasöre ekleyebilirsiniz . Bu örnek için sitemin kök klasöründe fonts klasörünü oluşturdum . Aşağıdaki ekran görüntüsünde neye benzediğini görebilirsiniz:
4. Yazı Tipi Yüzü İçin CSS Ekleyin
Yazı tipi dosyalarını sunucunuza yükledikten sonra, @font-face kullanarak bu yazı tiplerini sitenizin CSS’sine eklemeniz gerekir.
Bunu yapmak için WordPress Özelleştirici’nin Ek CSS sekmesini kullanabilirsiniz . Veya, bu ekran görüntüleri için yapacağım şey olan Tom Usborne’s Simple CSS gibi bir eklenti kullanabilirsiniz . Daha fazla bilgi için, WordPress’e özel CSS’yi güvenli bir şekilde nasıl ekleyeceğiniz konusundaki yazımıza göz atın .
Özel CSS ekleme yönteminizi seçtikten sonra, tam olarak ihtiyacınız olan CSS:
@font-face {
font-family: 'roboto-regular';
src: url('https://vast-termite.w5.wpsandbox.pro/fonts/Robot-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Bu kod parçacığı için:
- Yazı tipi ailesini gerçek yazı tipi ailesinin adı yapın
- URL’yi, sunucunuzdaki ilgili yazı tipi dosyasının gerçek URL’si ile değiştirin
Ayrıca, kullandığınız her bir ayrı yazı tipi dosyası için kod parçacığını tekrarlamak isteyeceksiniz. Sitemdeki üç yazı tipi dosyası için şöyle görünüyor:
5. Yazı Tipinin Kullanılacağı Yerler İçin CSS Ekleyin
Şimdi tek yapmanız gereken CSS’nizde yazı tiplerinizi kullanmaya başlamak!
Örneğin, tüm gövde metnimin şu anda kendi barındırdığım Roboto Normal yazı tipini kullanmasını isteseydim, bu CSS’yi kullanırdım:
body {font-family: 'roboto-regular', Arial, sans-serif;}
Bu CSS’yi, 4. Adımdaki CSS kodunu eklediğiniz konuma ekleyebilirsiniz.
WordPress Özelleştirici’nin bir GIF’ini kullanarak farkı size göstereceğim. Yeni CSS’yi eklerken gövde metnini izleyin:
6. Temanın Google Yazı Tiplerini Yüklemesini Durdurun
Siteniz hâlâ Google Fonts sunucusundan yazı tipleri yüklüyorsa, bunun nedeni temanızın hâlâ Google Fonts sunucularında barındırılan yazı tiplerini kullanması gerektiğini düşünmesi olabilir .
Bunu durdurmak için temanızı bir sistem yazı tipi yığını (varsa) kullanacak şekilde ayarlamayı deneyebilirsiniz. Örneğin GeneratePress , WordPress Customizer’da bu seçimi yapmama izin veriyor:
Veya genellikle ilgili bölümleri temanızın function.php dosyasından da kaldırabilirsiniz. Veya yorumda belirtildiği gibi, geçersiz kılmak için bir alt tema kullanabilirsiniz:
Google Yazı Tiplerini Devre Dışı Bırak eklentisini de deneyebilirsiniz , ancak her tema için çalıştığının garantisi yoktur.
Google Yazı Tiplerini Bir Eklentiyle Yerel Olarak Nasıl Barındırırsınız?
Manuel yöntem sizi bunalttıysa , Daan van den Bergh’den CAOS for Webfonts adlı bir WordPress eklentisini kullanarak Google Fonts’u yerel olarak da barındırabilirsiniz .
Eklentiyi kapsamlı bir şekilde test etmedim, ancak kullanımı oldukça kolay görünüyor. Tek yapmanız gereken yazı tipini ada göre aramak ve Stil Sayfası Oluştur ‘u tıklamaktır :
Ayrıca tam olarak hangi ağırlıkları dahil edeceğinizi de seçebilirsiniz.
Eklenti, stil sayfasını oluşturduğunda, onu temanızın başlığına ekleyecektir.
Eklentinin kullanımı çok kolay olsa da, yalnızca Google Yazı Tipleri için çalışacak, manuel yöntem ise herhangi bir yazı tipi için çalışacaktır.
Yazı tiplerini yerel olarak barındırmak, sitenizi yeni yazı tiplerine açmanın ve muhtemelen sitenizi hızlandırmanın harika bir yoludur.
Özellikle Google Fonts’u yerel olarak barındırmak istiyorsanız, bunu yapmanıza yardımcı olabilecek eklentiler vardır. Veya her zaman herhangi bir web yazı tipi için çalışacak olan manuel rotaya gidebilirsiniz.
Son olarak, WordPress sitenizdeki herhangi bir önemli değişiklikte olduğu gibi, yazı tiplerini yerel olarak barındırmanın sitenizi gerçekten hızlandırıp hızlandırmadığını görmek için her zaman test etmenizi öneririm. Beklediğiniz performans avantajlarını alamadığınızı fark ederseniz, yazı tipi dosyalarınızı sunmak için bir CDN kullanmayı düşünebilirsiniz.
