פונטים באלמנטור הם אחד הדברים שהכי משפיעים על התחושה של האתר, ובאופן מפתיע גם על המהירות שלו. פונט נכון נותן לאתר אופי ומקצועיות. פונט שנטען לא נכון מאט את העמוד, גורם לטקסט "לקפוץ" בזמן הטעינה, ולפעמים אפילו מעביר מידע על הגולשים לשרתים חיצוניים בלי שהתכוונתם.
במדריך הזה אני מראה צעד אחר צעד איך מטמיעים פונט מותאם אישית באלמנטור, עם צילומי מסך מהממשק, ומסביר איך אני מטפל בפונטים בכל אתר שאני בונה: למה אני מעדיף פונטים שנטענים מהשרת המקומי, איזה פורמט קובץ לבחור, כמה משקלים להעלות, ומה עושים כשהפונט לא מופיע.
איך מוסיפים פונטים באלמנטור? התשובה הקצרה
כדי להוסיף פונט מותאם אישית באלמנטור פרו נכנסים לאלמנטור, גופנים מותאמים, יוצרים גופן חדש, נותנים לו שם, מעלים קובץ WOFF2 לכל משקל (למשל 400 ו-700), ומפרסמים. מאותו רגע הפונט מופיע ברשימת הגופנים בכל ווידג'ט ובהגדרות הגלובליות של האתר. לפונטים של גוגל אין צורך בהעלאה, אבל עדיף להגדיר שייטענו מהשרת שלכם ולא מהשרתים של גוגל.
1. איך מגלים איזה פונט יש באתר שראיתם
ראיתם פונט שאתם אוהבים באתר אחר? הדרך הכי פשוטה לגלות את השם שלו היא תוסף כרום בשם WhatFont. אחרי ההתקנה לוחצים על סמל התוסף, ואז על כל טקסט בעמוד, והשם של הפונט מופיע מיד.
במקרה של האתר שלי, למשל, הפונט הוא ברזיה. אפשר לגלות את אותו מידע גם דרך כלי המפתחים של הדפדפן, בלשונית Computed, תחת font-family.
2. פונטים באלמנטור: חינם או בתשלום?
יש שלושה סוגים של פונטים, וחשוב להבין את ההבדל לפני שמורידים משהו:
| סוג | דוגמאות בעברית | רישיון | איך מטמיעים באלמנטור |
|---|---|---|---|
| פונטים של גוגל | Heebo, Assistant, Rubik, Frank Ruhl Libre | חינם לשימוש מסחרי | מובנים ברשימה, עדיף לטעון מקומית |
| פונטים חינמיים חיצוניים | פונטים מאתרי מעצבים ישראליים | לבדוק את תנאי הרישיון בכל פונט | העלאה דרך גופנים מותאמים |
| פונטים בתשלום | פונטים של בתי פונטים ישראליים | רישיון לפי שימוש, לפעמים לפי כמות צפיות | העלאה דרך גופנים מותאמים |
חשוב לבדוק שהרישיון מתיר שימוש ברשת (Web Font). רישיון לשימוש בדפוס לא תמיד מכסה שימוש באתר.
3. הטמעת פונטים באלמנטור שלב אחר שלב
אלה השלבים בממשק של אלמנטור פרו. התכונה של גופנים מותאמים זמינה בגרסת הפרו.
3.1 שלב 1: כניסה לגופנים מותאמים
בתפריט של וורדפרס לוחצים על אלמנטור ואז על גופנים מותאמים (Custom Fonts).
3.2 שלב 2: הוספת גופן חדש
לוחצים על הכפתור להוספת גופן חדש.
3.3 שלב 3: שם הפונט
רושמים את שם הפונט, עדיף באנגלית. זה השם שיופיע ברשימת הגופנים באלמנטור, ושם באנגלית מונע בעיות בקוד ה-CSS.
3.4 שלב 4: גופנים סטטיים
בוחרים בגופנים סטטיים, כלומר קובץ נפרד לכל משקל. אם יש לכם פונט משתנה (Variable Font) שמכיל את כל המשקלים בקובץ אחד, אפשר לבחור באפשרות הזאת.
3.5 שלב 5: העלאת הקובץ
בוחרים את סוג הקובץ, ברוב המקרים WOFF2, ומעלים אותו.
3.6 שלב 6: בחירת המשקל
מגדירים לכל קובץ את המשקל שלו. למשל, קובץ Light מקבל משקל 300, Regular מקבל 400 ו-Bold מקבל 700.
3.7 שלב 7: הוספת משקלים ופרסום
לכל משקל נוסף לוחצים שוב על הוספת גופן סטטי, מעלים את הקובץ ובוחרים את המשקל המתאים. בסוף לוחצים על פרסום.
3.8 שלב 8: בחירת הפונט באלמנטור
הפונט מופיע עכשיו תחת לשונית הסגנון, בטיפוגרפיה, בכל ווידג'ט.
ההמלצה שלי: לא לבחור את הפונט בכל ווידג'ט בנפרד, אלא להגדיר אותו פעם אחת בהגדרות האתר של אלמנטור, תחת גופנים גלובליים. כך אם תרצו להחליף פונט בעתיד, זה שינוי במקום אחד.
4. איזה פורמט קובץ לבחור לפונטים באלמנטור
| פורמט | מתי להשתמש | הערה |
|---|---|---|
| WOFF2 | תמיד, כברירת מחדל | הקובץ הכי קטן, נתמך בכל הדפדפנים המודרניים |
| WOFF | רק אם אין WOFF2 | גדול יותר, תמיכה רחבה |
| TTF / OTF | להמרה בלבד | כבדים, עדיף להמיר ל-WOFF2 לפני העלאה |
אם קיבלתם פונט רק בפורמט TTF, אפשר להמיר אותו ל-WOFF2 בכלי המרה, כל עוד הרישיון מתיר זאת.
5. למה אני טוען פונטים באלמנטור מהשרת המקומי ולא מגוגל
כברירת מחדל, פונטים של גוגל נטענים מהשרתים של גוגל. זה עובד, אבל יש לזה שני מחירים.
5.1 מהירות
כל פנייה לשרת חיצוני היא עוד חיבור שהדפדפן צריך לפתוח. פונט שנטען מאותו שרת של האתר נטען בדרך כלל מהר יותר ויציב יותר. באלמנטור יש הגדרה לטעינת פונטים של גוגל מקומית, ואני מפעיל אותה בכל אתר.
5.2 פרטיות
כשפונט נטען מהשרתים של גוגל, כתובת ה-IP של הגולש נשלחת לגוגל. ב-2022 בית משפט בגרמניה קבע שזה מנוגד לתקנות הפרטיות האירופיות (GDPR). גם אם אתם בישראל, טעינה מקומית פותרת את השאלה מראש.
6. איך פונטים באלמנטור משפיעים על המהירות
פונטים הם חלק מהסיבה שעמוד "קופץ" בזמן טעינה, ויכולים לפגוע במדדי Core Web Vitals. אלה הכללים שלי:
- לא יותר משני פונטים באתר. אחד לכותרות ואחד לטקסט, ולפעמים אחד בלבד.
- רק המשקלים שבשימוש. כל משקל הוא קובץ נוסף שנטען.
- font-display: swap. הטקסט מוצג מיד בפונט מערכת, ומתחלף כשהפונט נטען.
- טעינה מוקדמת של הפונט הראשי. בתוספי ביצועים כמו WP Rocket יש אפשרות לטעון פונטים מראש.
את שאר שלבי האופטימיזציה פירטתי במאמר על איך אני מביא אתר וורדפרס לציון ירוק ב-Core Web Vitals. וגם כאן, גודל הפונט באתר מוגדר אצלי ב-REM ולא בפיקסלים, וכתבתי על זה במאמר למה עברתי מ-PX ל-REM.
7. הפונט לא מופיע באלמנטור? פתרון תקלות
| התקלה | הסיבה הנפוצה | הפתרון |
|---|---|---|
| הפונט לא מופיע ברשימה | הגופן לא פורסם | לחזור לגופנים מותאמים וללחוץ על פרסום |
| הפונט מופיע בעורך ולא באתר | קאש | לנקות את הקאש של תוסף הקאש ושל אלמנטור |
| הבולד נראה "מזויף" | לא הועלה קובץ למשקל 700 | להעלות קובץ נפרד למשקל הבולד |
| הפונט לא נטען בדפדפן מסוים | פורמט לא נתמך | להעלות WOFF2 ו-WOFF |
| הטקסט קופץ בזמן טעינה | אין font-display: swap או טעינה מוקדמת | להגדיר swap ולטעון מראש את הפונט הראשי |
טעויות נפוצות עם פונטים באלמנטור
- להעלות את כל המשקלים "ליתר ביטחון". כל משקל מוסיף משקל לאתר.
- לבחור פונט בכל ווידג'ט בנפרד במקום בהגדרות הגלובליות.
- להשתמש בפונט בלי לבדוק רישיון לשימוש ברשת.
- להעלות קבצי TTF כבדים במקום להמיר ל-WOFF2.
- שלושה פונטים ומעלה באתר אחד. זה פוגע גם במהירות וגם במראה.
סיכום: פונטים באלמנטור, נכון ומהיר
הטמעת פונט מותאם באלמנטור לוקחת כמה דקות: גופנים מותאמים, גופן חדש, קובץ WOFF2 לכל משקל, פרסום. מה שמבדיל אתר מקצועי הוא מה שקורה מסביב: שני פונטים לכל היותר, רק המשקלים שבשימוש, טעינה מקומית, והגדרה גלובלית אחת.
כך אני עובד בכל אתר שאני בונה. אם אתם רוצים לשמוע עוד על הגישה שלי, אתם מוזמנים להכיר את יוסי מזרחי.
שאלות נפוצות על פונטים באלמנטור
איך מוסיפים פונט מותאם אישית באלמנטור?
באלמנטור פרו נכנסים לאלמנטור, גופנים מותאמים, יוצרים גופן חדש, מעלים קובץ WOFF2 לכל משקל ומפרסמים. הפונט מופיע מיד ברשימת הגופנים בכל ווידג'ט ובהגדרות הגלובליות.
האם אפשר להוסיף פונטים מותאמים באלמנטור החינמי?
התכונה של גופנים מותאמים זמינה באלמנטור פרו. בגרסה החינמית אפשר להשתמש בפונטים של גוגל שמובנים ברשימה, או להוסיף פונט דרך קוד CSS בתבנית.
איזה פורמט פונט הכי מתאים לאתר?
WOFF2. זה הפורמט הכי קטן, והוא נתמך בכל הדפדפנים המודרניים. קבצי TTF ו-OTF כבדים יותר, ועדיף להמיר אותם ל-WOFF2 לפני ההעלאה.
למה כדאי לטעון פונטים של גוגל מקומית?
טעינה מקומית חוסכת חיבור לשרת חיצוני ולכן בדרך כלל מהירה ויציבה יותר. בנוסף היא לא שולחת את כתובת ה-IP של הגולשים לגוגל, נושא שבית משפט בגרמניה קבע ב-2022 שמנוגד ל-GDPR.
כמה פונטים מומלץ להשתמש באתר?
לא יותר משניים: אחד לכותרות ואחד לטקסט. וגם בתוכם, להעלות רק את המשקלים שבאמת בשימוש.
למה הפונט שהעליתי לא מופיע באתר?
בדרך כלל זה קאש. מנקים את הקאש של תוסף הקאש ושל אלמנטור. אם הפונט לא מופיע גם ברשימה בעורך, כנראה שהגופן לא פורסם.
מה זה font-display: swap?
הגדרה שגורמת לדפדפן להציג את הטקסט מיד בפונט מערכת, ולהחליף לפונט המותאם ברגע שהוא נטען. כך הגולש לא רואה עמוד ריק בזמן הטעינה.
איפה מוצאים פונטים בעברית?
בפונטים של גוגל יש כמה פונטים עבריים טובים כמו Heebo, Assistant, Rubik ו-Frank Ruhl Libre. יש גם מעצבי פונטים ישראליים שמציעים פונטים חינמיים ובתשלום. בכל מקרה כדאי לבדוק את תנאי הרישיון לשימוש ברשת.
