วิธีการโหลดแบบอักษรของ Google ใน WordPress: รายการการเพิ่มประสิทธิภาพที่พบใน GTmetrix, Pingdom และ Google PageSpeed ​​Insights

หากเว็บไซต์ WordPress ของคุณมี Google Font ข้อผิดพลาดใน GTmetrix/Pingdom, การโหลด Google Fonts ในเครื่องควรแก้ไข.


คุณไม่สามารถควบคุมทรัพยากรและสคริปต์ภายนอกซึ่งทำให้ไม่สามารถบีบอัดย่อขนาดหรือปรับให้เหมาะสม สิ่งนี้สามารถส่งผลกระทบต่อความเร็ว WordPress ของคุณอย่างจริงจัง แหล่งข้อมูลภายนอกที่พบบ่อยที่สุดอย่างหนึ่งคือ Google Fonts หากคุณได้กำหนดค่าปลั๊กอินแคชเช่น WP Rocket หรือ WP Fastest Cache ไว้แล้วคุณอาจเริ่มสังเกตเห็นแหล่งข้อมูลภายนอกเช่นแบบอักษรที่มีผลต่อเกรด + เวลาในการโหลด นี่คือที่มาของการโหลด Google Fonts ในเครื่อง สิ่งนี้ช่วยให้ปลั๊กอินแคชของคุณบีบอัดทรัพยากรทั้งหมดที่เกี่ยวข้องกับแบบอักษรที่คุณกำหนดเอง.

ใช้การสำรองข้อมูลเต็มรูปแบบของเว็บไซต์ของคุณ (หรืออย่างน้อยไฟล์ที่คุณกำลังแก้ไข) ก่อนทำการเปลี่ยนแปลง.

ของ Google Fonts-GTmetrix

Contents

ขั้นตอนที่ 1: เลือกแบบอักษร Google

ในตัวอย่างนี้เราจะใช้ แบบอักษร Roboto ด้วยน้ำหนักแบบอักษรสองแบบ: ปกติ (400) และหนา (700).

ของ Google Fonts เลือก

ใช้ Google แบบอักษรน้อยลง – รักษาแบบอักษร Google ของคุณให้น้อยที่สุด (แบบอักษรน้อย = ร้องขอน้อย).

จงเลือกด้วยน้ำหนักแบบอักษร – จำนวนของน้ำหนักก็มีผลต่อเวลาในการโหลดด้วยเช่นกัน หากคุณต้องการรุ่นที่เป็นตัวหนาให้ยกเลิกการเลือกน้ำหนักอื่นเพื่อให้ Google แบบอักษรโหลดเฉพาะที่คุณต้องการ.

ขั้นตอนที่ 2: ดาวน์โหลด The Font

ดาวน์โหลดแบบอักษรเมื่อคุณพร้อม Google จะดาวน์โหลดน้ำหนักแบบอักษรทั้งหมดโดยอัตโนมัติดังนั้นจึงไม่จำเป็นต้องเลือกน้ำหนักแบบอักษรในขั้นตอนนี้และจำเป็นต้องใช้ในขั้นตอนที่ 3 แทน.

ของ Google Fonts-ดาวน์โหลด

ขั้นตอนที่ 3: แปลงแบบอักษรเป็นแบบอักษรบนเว็บ

ต่อไปเราจะแปลงไฟล์แบบอักษร (.ttf) เหล่านี้เป็นไฟล์แบบอักษรบนเว็บ ฉันจะใช้ Transfonter. ไปที่ไซต์ของพวกเขาคลิก เพิ่มแบบอักษร, แล้วก็ อัปโหลดเฉพาะประเภทแบบอักษรที่คุณจะใช้บนเว็บไซต์ของคุณ. ฉันกำลังใช้ Roboto-Regular.ttf และ Roboto-Bold.ttf ดังนั้นฉันจึงมีทั้งน้ำหนักปกติและหนา คงการตั้งค่าไว้เป็นค่าเริ่มต้นเนื่องจาก WOFF และ WOFF2 ครอบคลุมเบราว์เซอร์หลักทั้งหมด ตอนนี้คลิกแปลง.

Transfonter จาก Google Font-แปลง

เลือกประเภทแบบอักษรที่คุณจะใช้บนเว็บไซต์ของคุณเท่านั้น …

ของ Google Fonts-แปลงเลือก

ขั้นตอนที่ 4: ดาวน์โหลดไฟล์ฟอนต์ที่แปลงแล้ว

เมื่อแปลงฟอนต์แล้วคุณสามารถดาวน์โหลดได้ ในไฟล์ zip แต่ละฟอนต์จะมีฟอร์แมท WOFF และ WOFF2 (เนื่องจากเราดาวน์โหลดฟอนต์ 2 ตัวเราจะมีฟอนต์รวมทั้งหมด 4 ไฟล์).

WOFF จาก Google Font-แปลง

ขั้นตอนที่ 5: อัปโหลดไฟล์แบบอักษรไปยังไฟล์ WordPress

อัปโหลดไฟล์แบบอักษรบนเว็บผ่าน FTP หรือ cPanel โดยเฉพาะใน wp-content / อัปโหลด โฟลเดอร์เพื่อให้ชุดรูปแบบและการปรับปรุงหลักไม่แทนที่พวกเขา ฉันสร้างโฟลเดอร์“ แบบอักษร” และอัปโหลดที่นั่น (เพื่อแยกมันออกจากไฟล์อื่น ๆ ) เพื่อยืนยันว่าอัปโหลดสำเร็จแล้วและคุณมีลิงก์ที่ถูกต้องให้เปิดลิงก์ในเบราว์เซอร์ของคุณและแบบอักษรควรเริ่มดาวน์โหลด.

ตัวอย่าง:

  • 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

แทนที่ yourwebsite.com กับเว็บไซต์ของคุณเอง (และ HTTPS หากใช้ SSL) เป็นการทดสอบที่ดีที่สุดให้ทดสอบทั้ง 4 ลิงก์และตรวจสอบให้แน่ใจว่าคุณมี URL ที่ถูกต้อง.

ขั้นตอนที่ 6: เพิ่มแบบอักษรที่กำหนดเองลงใน CSS

ต่อไปเราจะเพิ่ม CSS ที่คุณได้รับภายในไฟล์ zip ที่ดาวน์โหลดมา stylesheet.css. นี่คือรหัส CSS ที่จะเชื่อมต่อแบบอักษรของคุณกับ CSS ที่มีอยู่และทำให้พร้อมใช้งาน.

จะวางรหัส CSS ไว้ที่ใด แต่คุณสามารถใช้สไตล์ชีทภายนอกหรือ WordPress ’ wp_enqueue_style ใน function.php หรือตอนเริ่มต้นของคุณ style.css ไฟล์ (หรือ custom.css ถ้าคุณมี) ฉันจะวางในไฟล์ style.css เริ่มต้นของธีม คัดลอก / วางรหัสลงในสไตล์ชีทและเปลี่ยน URL สัมพัทธ์เป็น URL สัมบูรณ์.

URL เริ่มต้นใน stylesheet.css:
src: url (รูปแบบ ‘Roboto-Bold.woff2’) (‘woff2’),
รูปแบบ URL (‘Roboto-Bold.woff’) (‘woff’);

เปลี่ยนเป็น:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/รูปแบบ Roboto-Regular.woff2 ‘) (‘ woff2 ‘),
URL (‘http://yourwebsite.com/wp-content/uploads/fonts/รูปแบบ Roboto-Regular.woff ‘) (‘ woff ‘);

โดยทั่วไปเพียงรวม URL ของโฟลเดอร์ไว้ข้างหน้าชื่อไฟล์แบบอักษร.

นี่เป็นทางเลือก แต่ถ้าคุณต้องการให้สร้างคลาสแบบกำหนดเองเพื่อใช้แบบอักษรใน HTML ที่มีอยู่ได้อย่างง่ายดาย ที่นี่เราตั้งชื่อชั้นเรียนของเรา roboto_font และ roboto_bold_font. หากต้องการทำสิ่งนี้ให้เพิ่มสิ่งนี้ลงในไฟล์ style.css ของคุณ (หลังจากรหัสด้านบน):

.roboto_font {

ตระกูลฟอนต์:“ Roboto”,“ Arial”, sans-serif;

}

.roboto_bold_font {

ตระกูลฟอนต์:“ Roboto”,“ Arial”, sans-serif;

น้ำหนักตัวอักษร: ตัวหนา;

}

ขั้นตอนที่ 7: ทดสอบแบบอักษร

ตอนนี้สร้างหน้าทดสอบและวางรหัสต่อไปนี้ใน แก้ไขข้อความ

การทดสอบ

การทดสอบแบบอักษรที่กำหนดเอง

การทดสอบแบบอักษรที่กำหนดเอง

ของ Google Fonts-ทดสอบ

ดูตัวอย่างหน้า หากคุณทำอย่างถูกต้องคุณควรเห็นแบบอักษรที่กำหนดเองใหม่! หัวข้อแรกคือแบบอักษรเริ่มต้นของเว็บไซต์ของคุณส่วนที่สองและสามคือแบบอักษร Google แบบอักษรที่เราเพิ่ม:

ท้องถิ่นของ Google Fonts

ขั้นตอนที่ 8: ตั้งค่าแบบอักษรเริ่มต้น

หากต้องการทำให้เป็นแบบอักษรเริ่มต้นของเว็บไซต์ให้เพิ่ม CSS นี้ในไฟล์ style.css ของคุณ:

ร่างกาย {

ตระกูลฟอนต์:“ Roboto”,“ Arial”, sans-serif;

}

ระวัง! หากคุณมีแบบอักษรที่กำหนดเองแล้วอาจไม่ปรากฏขึ้นอย่างถูกต้องและต้องการแก้ไขข้อบกพร่องหรือแก้ไขคุณสมบัติแบบอักษรตระกูลและแทนที่ด้วยแบบอักษรนี้แทน.

ขั้นตอนที่ 9: มีฟอนต์ Fallbacks เสมอ

การใช้แบบอักษร Google เป็นแบบอักษรไม่ถูกต้องเป็นวิธีปฏิบัติที่ไม่ดี แต่คุณควรระบุแบบอักษรหลายแบบรวมถึงแบบอักษรทั่วไปเช่น Arial, Times New Roman เพื่อให้เบราว์เซอร์สามารถย้อนกลับไปใช้แบบอักษรเหล่านี้ได้ในกรณีที่แบบอักษรไม่โหลดหรือใช้เวลาโหลดนานกว่า.

ไม่มีทางเลือก:
ตระกูลฟอนต์: ‘Roboto’;

ด้วยแบบอักษรสำรอง:
แบบอักษรตระกูล: ‘Roboto’, Arial, Sans-serif;

ตอนนี้ในกรณีที่ไม่สามารถโหลดแบบอักษร Google เบราว์เซอร์จะถอยกลับไปเป็นแบบอักษร Arial หรือแบบอักษรเริ่มต้นของระบบ sans-serif และไม่ทำให้เกิดปัญหาใด ๆ กับการแสดงผลแบบอักษร.

ทดสอบเว็บไซต์ของคุณอีกครั้ง (ใน GTmetrix)

คุณไม่ควรเห็นข้อผิดพลาดของ Google Fonts ในนั้น …

ใหม่ GTmetrix-Report.png

มีคำถามหรือไม่? วางสาย.

คำถามที่พบบ่อย

&# x2705; คุณจะเร่งความเร็ว Google Fonts ได้อย่างไร?

การรวม Google Fonts การโฮสต์ไว้ในเครื่องและการเชื่อมต่อและ prefecthing พวกเขาทั้งหมดสามารถช่วยปรับปรุงเวลาในการโหลดได้ ตรวจสอบ GTmetrix Waterfall ของคุณเพื่อรับเกณฑ์มาตรฐานของแบบอักษรของคุณจากนั้นทดสอบซ้ำหลังจากปรับให้เหมาะสม.

&# x2705; วิธีแปลงฟอนต์เป็นไฟล์ฟอนต์บนเว็บ?

เราใช้ Transfonter.

&# x2705; สิ่งที่เกี่ยวกับแบบอักษรที่กำหนดเองของ Elementor?

แบบอักษรที่กำหนดเองของ Elementor ยังสามารถโฮสต์ Google แบบอักษรในพื้นที่และติดตั้งไว้ใน Elementor Pro คุณสามารถใช้สิ่งนี้เพื่ออัปโหลดไฟล์แบบอักษรของคุณ.

&# x2705; ปลั๊กอินใดที่ช่วยปรับแบบอักษรให้เหมาะสม?

WP Rocket, OMGF, Autoptimize และ Perfmatters สามารถช่วยให้คุณเพิ่มประสิทธิภาพฟอนต์.

&# x2705; เกี่ยวกับการดึงข้อมูลล่วงหน้าและการเชื่อมต่อแบบอักษรล่วงหน้า?

สิ่งเหล่านี้สามารถเร่งความเร็วแบบอักษรโดยช่วยให้เบราว์เซอร์คาดการณ์ได้ดีขึ้น เราใช้ปลั๊กอิน Perfmatters โดย Kinsta เพื่อดึงข้อมูลล่วงหน้าและเชื่อมต่อแบบอักษรล่วงหน้า แต่คุณสามารถใช้ WP Rocket หรือปลั๊กอิน Pre Party Resource Hints.

ไชโย,
อุซามะห์

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

    Πώς να φορτώσετε τις γραμματοσειρές Google τοπικά στο WordPress: Ένα στοιχείο βελτιστοποίησης βρέθηκε σε GTmetrix, Pingdom και Google PageSpeed ​​Insights

    Εάν ο ιστότοπός σας στο WordPress έχει Γραμματοσειρά Google λάθη στο GTmetrix/Pingdom, Η τοπική φόρτωση των γραμματοσειρών Google πρέπει να τις διορθώσει.


    Δεν μπορείτε να ελέγξετε ορισμένους εξωτερικούς πόρους και σενάρια, γεγονός που καθιστά αδύνατη τη συμπίεση, την ελαχιστοποίηση ή τη βελτιστοποίηση. Αυτό μπορεί να επηρεάσει σοβαρά την ταχύτητα του WordPress. Ένας από τους πιο κοινούς εξωτερικούς πόρους είναι οι Γραμματοσειρές Google. Εάν έχετε ήδη διαμορφώσει μια προσθήκη προσωρινής μνήμης όπως το WP Rocket ή το WP Fastest Cache, ενδέχεται να αρχίσετε να παρατηρείτε εξωτερικούς πόρους όπως γραμματοσειρές που επηρεάζουν τους βαθμούς + τους χρόνους φόρτωσης. Αυτό είναι όπου η τοπική φόρτωση των γραμματοσειρών Google παίζει. Αυτό επιτρέπει στην προσθήκη cache να συμπιέσει όλους τους πόρους που σχετίζονται με τις προσαρμοσμένες γραμματοσειρές σας.

    Πάρτε ένα πλήρες αντίγραφο ασφαλείας του ιστότοπού σας (ή τουλάχιστον τα αρχεία που επεξεργάζεστε) πριν κάνετε αλλαγές.

    Google-Γραμματοσειρές-GTmetrix

    Contents

    Βήμα 1: Επιλέξτε μια γραμματοσειρά Google

    Σε αυτό το παράδειγμα, θα το χρησιμοποιήσουμε Γραμματοσειρά Roboto με δύο βάρη γραμματοσειράς: κανονικό (400) και έντονο (700).

    Επιλογή-Γραμματοσειρές Google

    Χρησιμοποιήστε λιγότερες γραμματοσειρές Google – περιορίστε στο ελάχιστο τις γραμματοσειρές σας Google (λιγότερες γραμματοσειρές = λιγότερα αιτήματα).

    Να είστε επιλεκτικοί με βάρη γραμματοσειράς – ο αριθμός των βαρών επηρεάζει επίσης τους χρόνους φόρτωσης. Εάν χρειάζεστε μόνο την έντονη έκδοση, καταργήστε την επιλογή των άλλων βαρών, ώστε οι Γραμματοσειρές Google να φορτώνουν μόνο εκείνες που χρειάζεστε.

    Βήμα 2: Λήψη της γραμματοσειράς

    Πραγματοποιήστε λήψη των γραμματοσειρών όταν είστε έτοιμοι. Η Google θα κατεβάσει αυτόματα όλα τα βάρη γραμματοσειρών, επομένως δεν απαιτείται επιλογή βάρη γραμματοσειράς σε αυτό το βήμα και απαιτείται αντ ‘αυτού στο βήμα 3.

    Λήψη γραμματοσειρών Google

    Βήμα 3: Μετατροπή γραμματοσειρών σε γραμματοσειρές Web

    Στη συνέχεια, θα μετατρέψουμε αυτά τα αρχεία γραμματοσειράς (.ttf) σε αρχεία γραμματοσειρών ιστού. Θα χρησιμοποιώ Μεταφορέας. Μεταβείτε στον ιστότοπό τους, κάντε κλικ Προσθήκη γραμματοσειρών, τότε ανεβάστε μόνο τους τύπους γραμματοσειρών που θα χρησιμοποιείτε στον ιστότοπό σας. Χρησιμοποιώ Roboto-Regular.ttf και Roboto-Bold.ttf οπότε έχω κανονικά και τολμηρά βάρη. Αφήστε τις ρυθμίσεις ως προεπιλεγμένες, καθώς τα WOFF και WOFF2 καλύπτουν όλα τα μεγάλα προγράμματα περιήγησης. Τώρα κάντε κλικ στο εικονίδιο μετατροπής.

    Μετατροπή-Google-γραμματοσειρά-μετατροπή

    Επιλέξτε μόνο τους τύπους γραμματοσειρών που θα χρησιμοποιείτε στον ιστότοπό σας…

    Επιλογή Google-Γραμματοσειρές-Μετατροπές

    Βήμα 4: Λήψη αρχείων μετατροπής γραμματοσειράς

    Μόλις μετατραπούν οι γραμματοσειρές, μπορείτε να τις κατεβάσετε. Στο αρχείο zip, κάθε γραμματοσειρά θα περιλαμβάνει μορφές WOFF και WOFF2 (αφού κατεβάσαμε 2 γραμματοσειρές, θα έχουμε συνολικά 4 αρχεία γραμματοσειρών).

    WOFF-Google-γραμματοσειρά-μετατροπή

    Βήμα 5: Μεταφόρτωση αρχείων γραμματοσειράς σε αρχεία WordPress

    Ανεβάστε τα αρχεία γραμματοσειρών Ιστού μέσω FTP ή cPanel, ιδανικά στο wp-content / μεταφορτώσεις φάκελο, έτσι ώστε το θέμα και οι βασικές ενημερώσεις να μην τις παρακάμπτουν. Δημιούργησα ένα φάκελο “γραμματοσειρές” και τα ανέβασα εκεί (για να τα χωρίσω από άλλα αρχεία). Για να επιβεβαιώσετε ότι μεταφορτώθηκαν με επιτυχία και ότι έχετε τους σωστούς συνδέσμους, ανοίξτε τους συνδέσμους στο πρόγραμμα περιήγησής σας και οι γραμματοσειρές θα πρέπει να ξεκινήσουν τη λήψη.

    Παράδειγμα:

    • 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

    Αντικαθιστώ yourwebsite.com με τον δικό σας ιστότοπο (και HTTPS εάν χρησιμοποιείτε SSL). Στην ιδανική περίπτωση, δοκιμάστε και τους 4 συνδέσμους και βεβαιωθείτε ότι έχετε τις σωστές διευθύνσεις URL (και επίσης φροντίστε να τις αποθηκεύσετε κάπου).

    Βήμα 6: Προσθήκη προσαρμοσμένης γραμματοσειράς στο CSS

    Στη συνέχεια, θα προσθέσουμε το CSS που λάβατε μέσα στο αρχείο zip που κατεβάσατε stylesheet.css. Αυτός είναι ο κωδικός CSS που θα συνδέσει τις γραμματοσειρές σας με το υπάρχον CSS και θα τις κάνει έτοιμες για χρήση.

    Πού να τοποθετήσετε τον κώδικα CSS είναι υποκειμενικός, αλλά μπορείτε να χρησιμοποιήσετε ένα εξωτερικό φύλλο στυλ ή το WordPress » wp_enqueue_style λειτουργία στο functions.php ή στην αρχή του style.css αρχείο (ή custom.css αν έχεις ένα). Θα το επικολλήσω στο προεπιλεγμένο αρχείο style.css του θέματος. Αντιγράψτε / επικολλήστε τον κώδικα στο φύλλο στυλ και αλλάξτε τυχόν σχετικές διευθύνσεις URL σε απόλυτες διευθύνσεις URL.

    Προεπιλεγμένες διευθύνσεις URL στο stylesheet.css:
    src: url (‘Roboto-Bold.woff2’) μορφή (‘woff2’),
    μορφή url («Roboto-Bold.woff») («woff»);

    Αλλάξτε τα σε:
    src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/Μορφή Roboto-Regular.woff2 ‘) (‘ woff2 ‘),
    url (‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff ‘) μορφή (‘ woff ‘);

    Βασικά, απλώς συμπεριλάβετε τη διεύθυνση URL του φακέλου πριν από το όνομα αρχείου γραμματοσειράς.

    Αυτό είναι προαιρετικό, αλλά αν προτιμάτε, δημιουργήστε μια προσαρμοσμένη τάξη για να χρησιμοποιήσετε εύκολα τη γραμματοσειρά σε υπάρχον HTML. Εδώ ονομάσαμε τα μαθήματά μας roboto_font και roboto_bold_font. Για να το κάνετε αυτό, προσθέστε το στο αρχείο style.css (μετά τον παραπάνω κώδικα):

    .roboto_font {

    font-family: “Roboto”, “Arial”, sans-serif;

    }

    .roboto_bold_font {

    font-family: “Roboto”, “Arial”, sans-serif;

    γραμματοσειρά: έντονο;

    }

    Βήμα 7: Δοκιμάστε τη γραμματοσειρά

    Τώρα δημιουργήστε μια δοκιμαστική σελίδα και τοποθετήστε τον ακόλουθο κώδικα στο Επεξεργαστής κειμένου

    Δοκιμές

    Δοκιμή γραμματοσειράς

    Δοκιμή γραμματοσειράς

    Δοκιμή γραμματοσειρών Google

    Προεπισκόπηση της σελίδας. Εάν το κάνατε σωστά, θα πρέπει να δείτε τη νέα προσαρμοσμένη γραμματοσειρά! Η πρώτη επικεφαλίδα είναι η προεπιλεγμένη γραμματοσειρά του ιστότοπού σας, η δεύτερη και η τρίτη είναι οι γραμματοσειρές Google Fonts που προσθέσαμε:

    Τοπικές-Google-γραμματοσειρές

    Βήμα 8: Ορίστε την προεπιλεγμένη γραμματοσειρά

    Για να ορίσετε αυτήν την προεπιλεγμένη γραμματοσειρά του ιστότοπού σας, προσθέστε αυτό το CSS στο αρχείο style.css:

    σώμα {

    font-family: “Roboto”, “Arial”, sans-serif;

    }

    Πρόσεχε! Εάν έχετε ήδη μια προσαρμοσμένη γραμματοσειρά, ενδέχεται να μην εμφανίζεται σωστά και να απαιτεί εντοπισμό σφαλμάτων ή επεξεργασία υφιστάμενων ιδιοτήτων γραμματοσειράς και αντικατάσταση αυτών με αυτήν.

    Βήμα 9: Πάντα έχετε εναλλακτικά γραμματοσειράς

    Είναι κακή πρακτική να εφαρμόζετε μια γραμματοσειρά Google ως οικογένεια γραμματοσειρών. Αντ ‘αυτού, θα πρέπει να έχετε ορίσει πολλές γραμματοσειρές, συμπεριλαμβανομένων των κοινών γραμματοσειρών, όπως Arial, Times New Roman, ώστε το πρόγραμμα περιήγησης να μπορεί να επιστρέψει σε αυτές τις γραμματοσειρές, σε περίπτωση που η γραμματοσειρά δεν φορτωθεί ή χρειαστεί περισσότερος χρόνος για να φορτωθεί.

    Χωρίς εναλλακτικό:
    font-family: ‘Roboto’;

    Με εναλλακτική γραμματοσειρά:
    γραμματοσειρά-οικογένεια: ‘Roboto’, Arial, Σανς σέριφ;

    Τώρα, σε περίπτωση που αποτύχει η φόρτωση των γραμματοσειρών σας Google, το πρόγραμμα περιήγησης θα επιστρέψει στη γραμματοσειρά Arial ή τον προεπιλεγμένο τύπο γραμματοσειράς sans-serif του συστήματος και δεν θα προκαλέσει προβλήματα με την απόδοση της γραμματοσειράς.

    Δοκιμάστε ξανά τον ιστότοπό σας (σε GTmetrix)

    Δεν πρέπει να βλέπετε σφάλματα γραμματοσειρών Google σε αυτό…

    Νέο-GTmetrix-Report.png

    Έχετε ερωτήσεις; Πάρε με τηλέφωνο.

    Συχνές Ερωτήσεις

    &# x2705; Πώς επιταχύνετε τις Γραμματοσειρές Google?

    Ο συνδυασμός των γραμματοσειρών Google, η φιλοξενία τους σε τοπικό επίπεδο και η διασύνδεση και η προεκλογή τους μπορούν να βοηθήσουν στη βελτίωση των χρόνων φόρτωσης. Ελέγξτε το GTmetrix Waterfall για να λάβετε ένα σημείο αναφοράς για τις γραμματοσειρές σας και, στη συνέχεια, δοκιμάστε ξανά μετά τη βελτιστοποίηση.

    &# x2705; Πώς να μετατρέψετε γραμματοσειρές τα αρχεία γραμματοσειρών Ιστού?

    Χρησιμοποιούμε Transfonter.

    &# x2705; Τι γίνεται με τις προσαρμοσμένες γραμματοσειρές Elementor?

    Οι Elementor Custom Fonts μπορούν επίσης να φιλοξενήσουν το Google Fonts τοπικά και είναι ενσωματωμένο στο Elementor Pro. Μπορείτε να το χρησιμοποιήσετε για να ανεβάσετε τα αρχεία γραμματοσειρών σας.

    &# x2705; Ποιες προσθήκες βοηθούν στη βελτιστοποίηση γραμματοσειρών?

    Τα WP Rocket, OMGF, Autoptimize και Perfmatters μπορούν να σας βοηθήσουν να βελτιστοποιήσετε τις γραμματοσειρές.

    &# x2705; Τι γίνεται με την προανάκτηση και την επανασύνδεση γραμματοσειρών?

    Αυτά μπορούν να επιταχύνουν τις γραμματοσειρές βοηθώντας τα προγράμματα περιήγησης να τα προβλέψουν καλύτερα. Χρησιμοποιούμε την προσθήκη Perfmatters από την Kinsta για την προ-λήψη και την επανασύνδεση γραμματοσειρών, αλλά μπορείτε επίσης να χρησιμοποιήσετε το WP Rocket ή το πρόσθετο Pre Party Resource Hints.

    Στην υγειά σας,
    Οσάμα

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