כיצד לטעון גופנים של גוגל באופן מקומי בוורדפרס: פריט מיטוב שנמצא בתובנות GTmetrix, Pingdom ו- Google PageSpeed

אם יש באתר וורדפרס שלך גופן של גוגל שגיאות ב GTmetrix/פינגדום, טעינת גופנים מקומיים צריכה לתקן אותם.


אינך יכול לשלוט בכמה משאבים ותסריטים חיצוניים, מה שלא מאפשר להם לדחוס, לצמצם או למטב. זה יכול להשפיע ברצינות על מהירות הוורדפרס שלך. אחד המשאבים החיצוניים הנפוצים ביותר הם גופנים של גוגל. אם כבר מוגדרת תוסף מטמון כמו WP Rocket או WP Fastest Cache, ייתכן שתתחיל לשים לב למשאבים חיצוניים כמו גופנים המשפיעים על ציונים + זמני טעינה. כאן נכנס לתמונה טעינת גופנים מקומיים. זה מאפשר לתוסף המטמון שלך לדחוס את כל המשאבים הקשורים לגופן / ים המותאמים אישית שלך.

קח גיבוי מלא של האתר שלך (או לפחות את הקבצים שאתה עורך) לפני שתבצע שינויים.

Google-Fonts-GTmetrix

שלב 1: בחר גופן של גוגל

בדוגמה זו נשתמש פונט רובוטו עם שני משקולות גופן: רגיל (400) ובוטה (700).

בחירת גופנים-גופנים

השתמש בפחות גופנים של גוגל – שמור על מינימום גופני Google שלך ​​(פחות גופנים = פחות בקשות).

היה סלקטיבי עם משקולות גופן – מספר המשקולות משפיע גם על זמני הטעינה. אם אתה זקוק רק לגרסה המודגש, בטל את סימון המשקולות האחרות כך שגופני גוגל רק יטענו את אלה שאתה זקוק להם.

שלב 2: הורד את הגופן

הורד את הגופנים כשאתה מוכן. גוגל תוריד אוטומטית את כל משקולות הגופן, כך שבחירת משקולות הגופן אינה נדרשת בשלב זה, והיא במקום זאת נדרשת בשלב 3.

גופנים-הורדות

שלב 3: המרת גופנים לגופני אינטרנט

בשלב הבא, נמיר את קבצי הגופנים האלה (.ttf) לקבצי גופן באינטרנט. אני אשתמש טרנספונטר. כנסו לאתר שלהם, לחצו הוסף גופנים, לאחר מכן העלה רק את סוגי הגופנים שבהם תשתמש באתר שלך. אני משתמש Roboto-Regular.ttf ו Roboto-Bold.ttf כך שיש לי משקולות רגילות וגם נועזות. השאר את ההגדרות כברירת מחדל מכיוון ש- WOFF ו- WOFF2 מכסים את כל הדפדפנים העיקריים. כעת לחץ על המר.

Transfonter-Google-Font-Conversion

בחר רק את סוגי הגופנים שבהם תשתמש באתר שלך …

גוגל-גופנים-בחירת המרה

שלב 4: הורד קבצי גופן שהומרו

לאחר המרת הגופנים, תוכלו להוריד אותם. בקובץ ה- zip כל גופן יכלול פורמטים WOFF ו- WOFF2 (מכיוון שהורדנו שני גופנים, יהיו לנו בסך הכל 4 קבצי גופנים).

WOFF-Google-Font-Conversion

שלב 5: העלה קבצי גופנים לקבצי וורדפרס

העלה את קבצי הגופן באינטרנט דרך 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

החלף אתר האינטרנט שלך עם אתר משלך (ו- HTTPS אם אתה משתמש ב- SSL). באופן אידיאלי, בדוק את כל ארבעת הקישורים וודא כי כתובת האתר נכונה (וגם הקפד לשמור אותם איפשהו).

שלב 6: הוסף גופן מותאם אישית ל- CSS

בשלב הבא נוסיף את ה- CSS שקיבלת בתוך קובץ ה- zip שהורדת בשם stylesheet.css. זהו קוד ה- CSS שיחבר את הגופנים שלך עם ה- CSS הקיים שלך ויהפוך אותם מוכנים לשימוש.

היכן למקם את קוד ה- CSS הוא סובייקטיבי, אך אתה יכול להשתמש בגיליון סגנונות חיצוני או ב- WordPress ‘ wp_enqueue_style פונקציה בפונקציות .php, או בתחילת שלך style.css קובץ (או custom.css אם יש לך כזה). אני הולך להדביק אותו בקובץ ברירת המחדל של style.css של הנושא. העתק / הדבק את הקוד בגיליון הסגנונות, ושנה את כל כתובות האתרים היחסיות לכתובות אתרים מוחלטות.

כתובות אתרים ברירת מחדל בסגנונות style.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 ‘);

בעיקרון, כלול רק את כתובת האתר של התיקיה לפני שם קובץ הגופן.

זה לא חובה, אך אם אתה מעדיף, צור מחלקה מותאמת אישית שתשתמש בקלות בגופן ב- HTML קיים. כאן קראנו לשיעורים שלנו רובוטו_פונט ו רובוטו_בולד_פונט. לשם כך, הוסף את זה לקובץ style.css שלך (אחרי הקוד לעיל):

.roboto_font {

משפחת גופן: “רובוטו”, “אריאל”, סאנס-סריף;

}

.roboto_bold_font {

משפחת גופן: “רובוטו”, “אריאל”, סאנס-סריף;

מודגש;

}

שלב 7: בדוק את הגופן

כעת צור דף בדיקה והנח את הקוד הבא בתוך עורך טקסט

בדיקה

מבחן גופן מותאם אישית

מבחן גופן מותאם אישית

בדיקת גופנים-גופנים

תצוגה מקדימה של הדף. אם עשית זאת נכון, עליך לראות את הגופן המותאם אישית החדש! הכותרת הראשונה היא גופן ברירת המחדל של אתר האינטרנט שלך, השנייה והשלישית הם גופני גופנים של גוגל שהוספנו:

גופנים מקומיים-גוגל

שלב 8: הגדר את גופן ברירת המחדל

כדי להפוך את זה לגופן ברירת המחדל של האתר שלך, הוסף CSS זה לקובץ style.css:

גוף {

משפחת גופן: “רובוטו”, “אריאל”, סאנס-סריף;

}

הזהר! אם כבר יש לך גופן מותאם אישית, יתכן שהוא לא יופיע כראוי ודורש ניפוי באגים או עריכה של מאפייני משפחת גופנים קיימים והחלפתם במקום זה.

שלב 9: יש תמיד נפילות בגופן

זה נוהג רע ליישם גופן של גוגל כמשפחת גופנים. במקום זאת, עליך לציין גופנים מרובים הכוללים את הגופנים הנפוצים כמו Arial, Times New Roman כך שהדפדפן יוכל לחזור לגופנים אלה למקרה שהגופן לא נטען או ייקח זמן רב לטעון..

ללא נפילה:
font-family: ‘רובוטו’;

עם גופן fallback:
font-family: ‘רובוטו’, אריאל, פונט סאנס סריף;

עכשיו, למקרה שהוא לא יטען את גופני הגוגל שלך, הדפדפן יחזור לגופן Arial או לסוג הגדרת ברירת המחדל של sans-serif של המערכת ולא יגרום לבעיות כלשהן עם עיבוד הגופן.

נסה מחדש את האתר שלך (ב- GTmetrix)

לא אמור לראות בו שגיאות גופנים של גוגל …

חדש-GTmetrix-Report.png

יש שאלות? זרוק לי שורה.

שאלות נפוצות

&# x2705; איך מאיצים את גופני גוגל?

שילוב גופנים של גוגל, אירוח מקומי וחיבור מקדים וקדימה של כל אחד מהם יכול לעזור בשיפור זמני הטעינה שלהם. בדוק את מפל ה- GTmetrix שלך כדי לקבל אמת מידה של הגופנים שלך, ואז לבדוק אותו מחדש לאחר ביצוע אופטימיזציה.

&# x2705; כיצד להמיר גופנים לקבצי הגופן באינטרנט?

אנו משתמשים בטרנספונטר.

&# x2705; מה לגבי גופנים מותאמים אישית של Elementor?

גופנים מותאמים אישית של Elementor יכולים גם לארח גופנים של גוגל באופן מקומי והיא מובנית ב- Elementor Pro. אתה יכול להשתמש בזה כדי להעלות את קבצי הגופן שלך.

&# x2705; אילו תוספים עוזרים לייעל גופנים?

WP Rocket, OMGF, Automization and Perfmatters יכולים כולם לעזור לך לייעל גופנים.

&# x2705; מה לגבי מילוי מראש וחיבור גופנים מראש?

אלה יכולים להאיץ את הגופנים בכך שהם עוזרים לדפדפנים לצפות אותם טוב יותר. אנו משתמשים בתוסף Perfmatters של Kinsta כדי לבטל ולחבר מראש גופנים, אך באפשרותך גם להשתמש ב- WP Rocket או בתוסף Hints 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