Yerli Google Şriftlərini WordPress-də necə yükləmək olar: GTmetrix, Pingdom və Google PageSpeed ​​anlayışlarında tapılan bir optimallaşdırma maddəsi

WordPress saytınız varsa Google Şrift səhvlər GTmetrix/Pansionat, Google Şriftləri yerli olaraq yükləmək onları düzəltməlidir.


Bəzi xarici mənbələri və skriptləri idarə edə bilməzsiniz, bu da onları sıxışdırmaq, minimallaşdırmaq və ya optimallaşdırmaq mümkün olmur. Bu, WordPress sürətinizə ciddi təsir göstərə bilər. Ən çox yayılmış xarici qaynaqlardan biri Google Fontsdur. WP Rocket və ya WP Fastest Cache kimi bir önbelleğinizi əvvəlcədən konfiqurasiya etdinizsə, qiymətlərə + yükləmə müddətinə təsir edən şriftlər kimi xarici qaynaqları görməyə başlaya bilərsiniz. Google Fonts lokal yükləmə oynayır. Bu, ön plagininizə xüsusi şriftlərinizlə əlaqəli bütün mənbələri sıxışdırmağa imkan verir..

Dəyişiklik etmədən əvvəl saytınızın (və ya ən azı redaktə etdiyiniz sənədlərin) tam bir nüsxəsini götürün.

Google-Fonts-GTmetrix

Addım 1: Google Şriftini seçin

Bu nümunədə istifadə edəcəyik Roboto şriftidir iki şrift çəkisi ilə: müntəzəm (400) və qalın (700).

Google-Şriftlər-Seçim

Daha az Google şriftlərindən istifadə edin – Google Şriftlərinizi minimuma endirin (az şriftlər = az sorğu).

Şrift çəkiləri ilə seçici olun – çəkilərin sayı yükləmə müddətinə də təsir göstərir. Yalnız cəsarətli versiyaya ehtiyacınız varsa, digər ağırlıqları çıxartın ki, Google Fonts yalnız sizə lazım olanları yükləsin.

Addım 2: Şrifti yükləyin

Hazır olduqda şriftləri yükləyin. Google bütün şrift çəkilərini avtomatik yükləyəcək, buna görə də bu addımda font çəkilərinin seçilməsi tələb olunmur və əvəzinə 3 addımda tələb olunur..

Google-Şrift-Yükləmə

Addım 3: Şriftləri Veb Şriftlərə çevirin

Bundan sonra bu şrift sənədlərini (.ttf) veb şrift fayllarına çevirəcəyik. İstifadə edərəm Transfonter. Onların saytına gedin, vurun Şriftləri əlavə edin, sonra yalnız veb saytınızda istifadə edəcəyiniz şrift növlərini yükləyin. İstifadə edirəm Roboto-Regular.ttfRoboto-Bold.ttf buna görə həm normal, həm də cəsarətli çəkilərim var. WOFF və WOFF2 bütün əsas brauzerləri əhatə etdiyindən parametrləri standart olaraq buraxın. İndi çevirmək vurun.

Transfonter-Google-Şrift-Dönüşüm

Yalnız veb saytınızda istifadə edəcəyiniz şrift növlərini seçin …

Google-Şriftlər-Dönüşüm-Seçim

Addım 4: Çevirilmiş Şrift Fayllarını yükləyin

Şriftlər çevrildikdən sonra onları yükləyə bilərsiniz. Zip sənədində hər bir şriftə WOFF və WOFF2 formatları daxil olacaq (2 şrift yüklədiyimiz üçün cəmi 4 şrift faylımız olacaq).

WOFF-Google-Şrift-Dönüşüm

Addım 5: Şrift sənədlərini WordPress fayllarına yükləyin

Veb şrift fayllarını FTP və ya cPanel vasitəsi ilə ideal şəkildə yükləyin wp-content / yükləmə qovluq, belə ki mövzu və əsas yeniləmələr onları ləğv etmir. Bir “şriftlər” qovluğu yaratdım və orada yüklədim (digər fayllardan ayırmaq üçün). Onların uğurla yükləndiyini və düzgün bağlantıların olduğunu təsdiqləmək üçün brauzerinizdə əlaqələri açın və şriftlər yükləməyə başlamalı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

Dəyişdirin veb saytınız öz veb saytınızla (və SSL istifadə edirsinizsə HTTPS). İdeal olaraq, bütün 4 bağlantını sınayın və URL-lərin düzgün olduğundan əmin olun (həmçinin onları bir yerdə saxlamağınızdan əmin olun)..

Addım 6: CSS-ə Xüsusi Şrift əlavə edin

Sonra, adlanan yüklənmiş zip faylı içərisindəki CSS-i əlavə edəcəyik stil cədvəli.css. Bu şriftlərinizi mövcud CSS ilə birləşdirəcək və istifadəyə hazır edəcək CSS kodudur.

CSS kodunu harada yerləşdirmək subyektivdir, ancaq xarici tərz cədvəlindən və ya WordPress’dən istifadə edə bilərsiniz wp_enqueue_style funksiyaları.php-də və ya başlanğıcda stil.css fayl (və ya.) xüsusi.css biriniz varsa). Mən onu temanın standart style.css faylına yapışdıracağam. Kodu stil cədvəlinə kopyalayın / yapışdırın və hər hansı bir nisbi URL-i mütləq URL-lərə dəyişdirin.

Stylesheet.css-də standart URL-lər:
src: url (‘Roboto-Bold.woff2’) formatı (‘woff2’),
url (‘Roboto-Bold.woff’) formatı (‘woff’);

Bunları dəyişdirin:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2 ‘) formatı (‘ woff2 ‘),
url (‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff ‘) format (‘ woff ‘);

Əsasən, şrift adının adından əvvəl qovluğun URL-i daxil edin.

Bu isteğe bağlıdır, lakin istəsəniz, mövcud HTML-də şriftdən asanlıqla istifadə etmək üçün xüsusi bir sinif yaradın. Burada dərslərimizin adını verdik roboto_fontroboto_bold_font. Bunu etmək üçün bunu style.css faylınıza əlavə edin (yuxarıdakı koddan sonra):

.roboto_font {

şrift ailəsi: “Roboto”, “Arial”, sans-serif;

}

.roboto_bold_font {

şrift ailəsi: “Roboto”, “Arial”, sans-serif;

şrift çəkisi: qalın;

}

Addım 7: Şrifti sınayın

İndi bir test səhifəsi yaradın və aşağıdakı kodu aşağıdakılara qoyun Mətn redaktoru

Test

Xüsusi Şrift Testi

Xüsusi Şrift Testi

Google-Şriftlər-Test

Səhifəyə əvvəlcədən baxın. Düzgün etmisinizsə, yeni xüsusi şrift görməlisiniz! Birinci başlıq veb saytınızın standart şriftidir, ikinci və üçüncü əlavə etdiyimiz Google Şrift şriftləridir:

Yerli-Google-Şriftlər

Addım 8: Defolt Şrift seçin

Veb saytınızın standart şriftini düzəltmək üçün bu CSS-nı stil.css faylınıza əlavə edin:

bədən {

şrift ailəsi: “Roboto”, “Arial”, sans-serif;

}

Ehtiyatlı ol! Fərdi şriftiniz varsa, düzgün görünməməlidir və mövcud font-ailə xüsusiyyətlərini düzəltməyi və ya redaktə etməyi və bunun əvəzinə bu ilə əvəz edilməsini tələb edir..

9-cu addım: Həmişə Şriftdə çatışmazlıqlar var

Google Şriftini şrift ailəsi kimi tətbiq etmək pis bir təcrübədir. Bunun əvəzinə, Arial, Times New Roman kimi ümumi şriftlər daxil olmaqla çox sayda şriftə sahib olmalısınız ki, brauzer şrift yüklənməsə və ya yükləmək üçün daha uzun sürərsə geri dönə bilər..

Etibarsız:
şrift ailəsi: ‘Roboto’;

Ehtiyat şriftlə:
şrift ailəsi: ‘Roboto’, Arial, sans-serif;

İndi Google Şriftlərinizi yükləyə bilmədiyi təqdirdə, brauzer Arial şriftinə və ya sistemin standart sans-serif şrift tipinə geri dönəcək və şrift göstərilməsində heç bir problem yaratmayacaq..

Veb saytınızı yenidən sınayın (GTmetrix-də)

Heç bir Google Fonts səhvlərini görməməlisiniz …

Yeni-GTmetrix-Report.png

Suallarınız var? Mənə bir xətt çək.

Tez-tez soruşulan suallar

&# x2705; Google Şriftləri necə sürətləndirirsiniz?

Google Şriftləri birləşdirmək, onları yerli yerləşdirmək və əvvəlcədən əlaqə qurmaq və prefekturasiya etmək yükləmə müddətini yaxşılaşdırmağa kömək edə bilər. GTmetrix şəlalənizi şriftlərinizin bir etalonunu əldə etmək üçün yoxlayın, optimallaşdırdıqdan sonra yenidən sınayın.

&# x2705; Şriftləri veb şrift sənədlərinə necə çevirmək olar?

Transfonter istifadə edirik.

&# x2705; Elementor xüsusi şriftləri haqqında?

Elementor Custom Fonts da Google Fonts-u yerli olaraq qəbul edə bilər və Elementor Pro-da quraşdırılmışdır. Şrift sənədlərinizi yükləmək üçün bundan istifadə edə bilərsiniz.

&# x2705; Hansı pluginlər şriftləri optimallaşdırmağa kömək edir?

WP Rocket, OMGF, Autoptimize və Perfmatters hamısı şriftləri optimallaşdırmağa kömək edə bilər.

&# x2705; Şriftləri əvvəlcədən və əvvəlcədən bağlamaq barədə?

Bunlar şriftləri sürətləndirə bilər, brauzerlərin daha yaxşı olacağını gözləyirlər. Şriftləri əvvəlcədən qurmaq və ayırmaq üçün Kinsta tərəfindən hazırlanan Perfmatters plaginindən istifadə edirik, ancaq WP Rocket və ya Pre Party Resource Hints plaginlərindən də istifadə edə bilərsiniz.

Salamlar,
Üsamə

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