Google Yazı Tiplerini WordPress’e Yerel Olarak Yükleme: GTmetrix, Pingdom ve Google PageSpeed ​​Insights’da Bulunan Bir Optimizasyon Öğesi

WordPress sitenizde Google Yazı Tipi hatalar GTmetrix/Pingdom, Google Yazı Tiplerini yerel olarak yüklemek onları düzeltmelidir.


Bazı harici kaynakları ve komut dosyalarını kontrol edemezsiniz; bu da onları sıkıştırmayı, küçültmeyi veya optimize etmeyi imkansız hale getirir. Bu, WordPress hızınızı ciddi şekilde etkileyebilir. En yaygın harici kaynaklardan biri Google Fonts’tur. WP Rocket veya WP En Hızlı Önbellek gibi bir önbellek eklentisini zaten yapılandırdıysanız, notları ve yükleme sürelerini etkileyen yazı tipleri gibi harici kaynakları fark etmeye başlayabilirsiniz. Google Fonts’un yerel olarak yüklenmesi burada devreye girer. Bu, önbellek eklentinizin özel fontlarınızla ilgili tüm kaynakları sıkıştırmasını sağlar.

Değişiklik yapmadan önce sitenizin (veya en azından düzenlediğiniz dosyaların) tam bir yedeğini alın.

Google-Yazı tipleri-GTmetrix

1. Adım: Bir Google Yazı Tipi Seçin

Bu örnekte, Roboto yazı tipi iki yazı tipi ağırlığına sahip: normal (400) ve kalın (700).

Google-Yazı tipleri-Seçim

Daha Az Google Yazı Tipi Kullan – Google Yazı Tiplerinizi minimumda tutun (daha az yazı tipi = daha az istek).

Yazı Tipi Ağırlıkları ile Seçici Olun – ağırlıkların sayısı yükleme sürelerini de etkiler. Yalnızca kalın sürüme ihtiyacınız varsa, Google Fonts’un yalnızca ihtiyacınız olanları yüklemesi için diğer ağırlıkların işaretini kaldırın.

Adım 2: Yazı Tipini İndirin

Hazır olduğunuzda yazı tiplerini indirin. Google tüm font ağırlıklarını otomatik olarak indirecektir, bu nedenle bu adımda font ağırlıklarının seçimi gerekli değildir ve bunun yerine 3. adımda gereklidir.

Google-Yazı tipleri-İndir

Adım 3: Yazı Tiplerini Web Yazı Tiplerine Dönüştür

Ardından, bu yazı tipi dosyalarını (.ttf) web yazı tipi dosyalarına dönüştüreceğiz. Kullanacağım Transfonter. Sitelerine gidin, tıklayın Yazı Tipi Ekle, sonra yalnızca web sitenizde kullanacağınız yazı tipi türlerini yükleyin. Kullanıyorum Roboto-Regular.ttf ve Roboto-Bold.ttf bu yüzden düzenli ve cesur ağırlığım var. WOFF ve WOFF2 tüm önemli tarayıcıları kapsadığından ayarları varsayılan olarak bırakın. Şimdi dönüştür’ü tıklayın.

Transfonter Google tarafından Font-Dönüşüm

Yalnızca web sitenizde kullanacağınız yazı tipi türlerini seçin…

Google-Yazı-Dönüşüm-Seçim

Adım 4: Dönüştürülmüş Font Dosyalarını İndirin

Yazı tipleri dönüştürüldükten sonra bunları indirebilirsiniz. Zip dosyasında her yazı tipi WOFF ve WOFF2 formatlarını içerecektir (2 yazı tipini indirdiğimiz için toplam 4 yazı tipi dosyamız olacak).

Woff Google tarafından Font-Dönüşüm

Adım 5: Yazı Tipi Dosyalarını WordPress Dosyalarına Yükleme

Web yazı tipi dosyalarını FTP veya cPanel aracılığıyla, ideal olarak WP-içeriği / yüklemeler tema ve temel güncellemeler bunları geçersiz kılmaz. Bir “fontlar” klasörü oluşturdum ve oraya yükledim (diğer dosyalardan ayırmak için). Başarılı bir şekilde yüklendiklerini ve doğru bağlantılara sahip olduğunuzu doğrulamak için, tarayıcınızda bağlantıları açın; yazı tipleri indirilmeye başlanmalıdır.

Misal:

  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff2

değiştirmek yourwebsite.com kendi web sitenizle (ve SSL kullanıyorsanız HTTPS) kullanabilirsiniz. İdeal olarak, 4 bağlantıyı da test edin ve URL’lerin doğru olduğundan emin olun (ve bunları bir yere kaydettiğinizden emin olun).

Adım 6: CSS’ye Özel Yazı Tipi Ekleme

Ardından, indirdiğiniz zip dosyasının içinde bulunan CSS’yi stylesheet.css. Bu, yazı tiplerinizi mevcut CSS’nize bağlayacak ve kullanıma hazır hale getirecek CSS kodudur.

CSS kodunun nereye yerleştirileceği özneldir, ancak harici bir stil sayfası veya WordPress kullanabilirsiniz. wp_enqueue_style function.php dosyasındaki veya style.css dosya (veya custom.css eğer varsa). Bunu temanın varsayılan style.css dosyasına yapıştıracağım. Kodu kopyalayın / stil sayfasına yapıştırın ve göreli URL’leri mutlak URL’lerle değiştirin.

Stylesheet.css içindeki varsayılan URL’ler:
src: url (‘Roboto-Bold.woff2’) biçimi (‘woff2’),
url (‘Roboto-Bold.woff’) biçimi (‘woff’);

Bunları şu şekilde değiştirin:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2 ‘) biçimi (‘ woff2 ‘),
url (‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff ‘) biçimi (‘ woff ‘);

Temel olarak, yazı tipi dosya adından önce klasör URL’sini eklemeniz yeterlidir.

Bu isteğe bağlıdır, ancak isterseniz yazı tipini mevcut HTML’de kolayca kullanmak için özel bir sınıf oluşturun. Burada sınıflarımızı adlandırdık roboto_font ve roboto_bold_font. Bunu yapmak için, style.css dosyanıza ekleyin (yukarıdaki koddan sonra):

.roboto_font {

yazı tipi ailesi: “Roboto”, “Arial”, sans-serif;

}

.roboto_bold_font {

yazı tipi ailesi: “Roboto”, “Arial”, sans-serif;

yazı tipi ağırlığı: kalın;

}

Adım 7: Yazı Tipini Test Edin

Şimdi bir test sayfası oluşturun ve aşağıdaki kodu Metin düzeltici

Test yapmak

Özel Yazı Tipi Testi

Özel Yazı Tipi Testi

Google-Yazı tipleri-Test

Sayfayı önizleyin. Doğru yaptıysanız, yeni özel yazı tipini görmelisiniz! İlk başlık, web sitenizin varsayılan yazı tipi, ikinci ve üçüncü başlık eklediğimiz Google Yazı Tipleri yazı tipleridir:

Yerel Google tarafından yazı tipleri

Adım 8: Varsayılan Yazı Tipini Ayarlama

Bunu web sitenizin varsayılan yazı tipi yapmak için bu CSS’yi style.css dosyanıza ekleyin:

vücut {

yazı tipi ailesi: “Roboto”, “Arial”, sans-serif;

}

Dikkatli ol! Zaten özel bir yazı tipiniz varsa, düzgün görünmeyebilir ve mevcut yazı tipi ailesi özelliklerinde hata ayıklama veya düzenleme ve bunun yerine bu yazı tipiyle değiştirilmesi gerekebilir..

Adım 9: Her Zaman Font Yedekleri Olsun

Google Yazı Tipini yazı tipi ailesi olarak uygulamak kötü bir uygulamadır. Bunun yerine, Arial, Times New Roman gibi ortak fontlar da dahil olmak üzere birden çok yazı tipine sahip olmanız gerekir; böylece yazı tipinin yüklenmemesi veya yüklenmesi daha uzun sürmesi durumunda tarayıcı bu yazı tiplerine geri dönebilir.

Yedek olmadan:
yazı tipi ailesi: ‘Roboto’;

Yedek yazı ile:
font-family: ‘Roboto’, Arial, sans Serif;

Şimdi, Google Yazı Tiplerinizi yükleyememesi durumunda, tarayıcı Arial yazı tipine veya sistemin varsayılan sans-serif yazı tipi türüne geri döner ve yazı tipi oluşturma ile ilgili sorunlara neden olmaz..

Web Sitenizi Yeniden Test Edin (GTmetrix’te)

İçinde herhangi bir Google Fonts hatası görmemelisiniz …

Yeni-GTmetrix-Report.png

Sorularım var? Bana yaz.

Sıkça Sorulan Sorular

&# X2705; Google Yazı Tiplerini nasıl hızlandırıyorsunuz??

Google Yazı Tiplerini birleştirmek, yerel olarak barındırmak ve bunları önceden bağlamak ve seçmek, yükleme sürelerini iyileştirmeye yardımcı olabilir. Yazı tiplerinizin karşılaştırmasını almak için GTmetrix Şelalenizi kontrol edin, ardından optimize ettikten sonra tekrar test edin.

&# X2705; Yazı tiplerini web yazı tipi dosyaları dönüştürme?

Transfonter kullanıyoruz.

&# X2705; Elementor özel yazı tipleri ne olacak?

Elementor Özel Yazı Tipleri ayrıca Google Yazı Tiplerini yerel olarak da barındırabilir ve Elementor Pro’da yerleşiktir. Yazı tipi dosyalarınızı yüklemek için bunu kullanabilirsiniz.

&# X2705; Hangi eklentiler yazı tiplerini optimize etmeye yardımcı olur?

WP Rocket, OMGF, Autoptimize ve Perfmatterlerin tümü yazı tiplerini optimize etmenize yardımcı olabilir.

&# X2705; Yazı tiplerini önceden getirme ve önceden bağlama hakkında?

Bunlar, tarayıcıların daha iyi tahmin etmesine yardımcı olarak yazı tiplerini hızlandırabilir. Yazı tiplerini önceden getirmek ve bağlamak için Kinsta’dan Perfmatters eklentisini kullanıyoruz, ancak WP Rocket veya Parti Öncesi Kaynak İpuçları eklentisini de kullanabilirsiniz.

Şerefe,
Üsame

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map