פונטים בעברית שמאטים את האתר – Google Fonts, אחסון מקומי ו-font-display

עודכן לאחרונה: 07.11.2026 · מאת עשהאל דרייר

בקצרה: פונט עברי מאט אתר לא בגלל המשקל שלו, אלא בגלל שרשרת בקשות לשרתים חיצוניים וטקסט שנשאר בלתי נראה עד שהפונט מגיע. הפתרון: לארח את הפונט באתר עצמו בפורמט woff2, לטעון רק את המשקלים שבשימוש, להוסיף font-display: swap ולטעון מראש את קובץ העברית. במדידה שלנו ב-7.11.2026, קובץ העברית של Heebo שוקל כ-12KB בלבד.

⏱ זמן ביצוע: 30–45 דקות · רמת קושי: בינוני · נבדק לאחרונה: 07.11.2026

למה פונט עברי מאט את האתר?

בגלל הסדר שבו הדפדפן מגלה אותו. הדפדפן טוען את ה-HTML, מוצא בו קישור ל-CSS של Google Fonts, פותח חיבור לשרת אחד, קורא את ה-CSS, ורק אז מגלה שצריך קובץ פונט משרת שני ופותח עוד חיבור. כל שלב מחכה לקודם.

בזמן הזה הטקסט העברי לא מוצג, או מוצג בפונט אחר ואז "קופץ". הראשון נקרא FOIT (טקסט בלתי נראה), השני FOUT (טקסט לא מעוצב). שניהם פוגעים במדדי Core Web Vitals: הכותרת הראשית מאחרת להופיע (LCP), והעימוד זז כשהפונט מתחלף (CLS).

הטענה הישנה ש"Google Fonts כבר שמור בדפדפן של כולם" לא נכונה יותר. לפי הבלוג של Chrome, מגרסה 86 המטמון מחולק לפי האתר שמבקר בו הגולש, כך שכל אתר מוריד את הפונט בעצמו.

כמה שוקל פונט עברי לאתר?

פחות ממה שחושבים. ב-7.11.2026 ביקשנו מ-Google Fonts חמישה פונטים נפוצים באתרים בעברית, במשקלים 400 ו-700, ומדדנו את גודל קבצי ה-woff2 שהשרת החזיר.

פונט	קובץ עברית	קובץ לטינית	סה"כ לעמוד עברי עם מילים באנגלית
Assistant	7.3KB	22.1KB	כ-29KB
Rubik	9.3KB	35.3KB	כ-45KB
Heebo	12.0KB	30.1KB	כ-42KB
Noto Sans Hebrew	12.3KB	20.2KB	כ-32KB
Open Sans	16.9KB	48.3KB	כ-65KB

שיטה: בקשה ל-fonts.googleapis.com/css2 עם דפדפן Chrome מדומה, וקריאת Content-Length של כל קובץ (1KB = 1,000 בתים). Google Fonts מחלק כל פונט לקבצים לפי טווח תווים (unicode-range), והדפדפן מוריד רק את הקבצים שהתווים שלהם מופיעים בעמוד. עמוד בעברית שיש בו גם מילים באנגלית או מספרים מוריד את שני הקבצים.

המסקנה: עשרות KB הם לא הבעיה. הבעיה היא עוד שני שרתים בשרשרת, ופונטים לא משתנים שבהם כל משקל הוא קובץ נפרד. אתר שטוען שישה משקלים של פונט כזה, בשני פונטים שונים, כבר מוריד עשרה קבצים ויותר.

Google Fonts או אחסון מקומי – מה עדיף?

ברוב אתרי הוורדפרס בעברית, אחסון מקומי. לפי המדריך של web.dev, אחסון עצמי של פונטים לא תמיד מהיר יותר, ובלי CDN ו-HTTP/2 סביר הרבה פחות שישפר ביצועים. לכן הוא מתאים כשהאתר משתמש בשניהם. בקלאודוויז (Cloudways) שני התנאים מתקיימים כשמחברים Cloudflare או את ה-CDN של Breeze.

שיטה	יתרון	חיסרון	מתאים ל
Google Fonts עם preconnect	שתי שורות קוד, עדכונים אוטומטיים	שני שרתים חיצוניים בשרשרת	אתר קטן, בלי זמן לטפל
אחסון מקומי (woff2)	אותו חיבור כמו האתר, שליטה מלאה ב-font-display	צריך להוריד ולהעלות קבצים פעם אחת	רוב אתרי העסקים והחנויות
אחסון מקומי + preload	הפונט העברי מתחיל לרדת עם ה-HTML	preload מיותר מאט במקום להאיץ	אתרים שהכותרת הראשית שלהם בפונט מיוחד
פונט מערכת (בלי פונט אינטרנט)	אפס הורדות	מראה שונה בין מכשירים	אתרים שמהירות קודמת לעיצוב

איך מארחים פונט עברי מקומית בוורדפרס – שלב אחר שלב?

לפני שמתחילים, קחו גיבוי של האתר והשתמשו בתבנית בת (Child Theme), כדי שעדכון תבנית לא ימחק את השינויים.

1. פתחו בדפדפן את כתובת ה-CSS של הפונט, למשל https://fonts.googleapis.com/css2?family=Heebo:wght@400;700&display=swap, ומצאו את הבלוקים שמסומנים /* hebrew */ ו-/* latin */.
2. הורידו את קבצי ה-woff2 מהכתובות שבבלוקים האלה, ותנו להם שמות ברורים, למשל heebo-hebrew.woff2 ו-heebo-latin.woff2.
3. העלו את הקבצים לתיקייה fonts בתבנית הבת, דרך SFTP או מנהל הקבצים של קלאודוויז.
4. הוסיפו לקובץ ה-CSS של תבנית הבת הגדרת @font-face לכל קובץ, עם font-display: swap ועם אותו unicode-range שהופיע ב-CSS של Google (ראו דוגמה מתחת).
5. כבו את טעינת Google Fonts בתבנית או בבונה העמודים. ברוב התבניות ובאלמנטור יש לכך הגדרה; בלי זה הפונט ייטען פעמיים.
6. בתוסף Breeze, בלשונית Preload, הוסיפו את כתובת קובץ העברית בלבד. לפי מאגר הידע של קלאודוויז, לעולם לא מכניסים שם את קובץ ה-CSS הראשי של התבנית.
7. נקו קאש בשרת ובתוסף, ובדקו בכלי המפתחים בלשונית Network שהפונט נטען מהדומיין שלכם. איך מנקים קאש מוסבר במדריך ניקוי הקאש.

דוגמה להגדרה של Heebo מקומי. אם ביקשתם משקלים 400 ו-700, ההגדרה מכסה את שניהם בקובץ אחד:

@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/heebo-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

ה-unicode-range בדוגמה הוא בדיוק מה ש-Google Fonts החזיר לקובץ העברית של Heebo ב-7.11.2026. הוא כולל את האותיות העבריות, הניקוד, סימני כיווניות וסימן השקל (U+20AA). לקובץ הלטיני מעתיקים את הטווח מהבלוק /* latin */.

מה עושה font-display ואיזה ערך לבחור?

font-display קובע מה הדפדפן מציג בזמן שהפונט עוד לא הגיע. לפי התיעוד של MDN, הערך swap נותן זמן חסימה קצר מאוד ואז מציג פונט חלופי עד שהפונט האמיתי נטען.

ערך	מה הגולש רואה	מתי לבחור
swap	טקסט מיד בפונט חלופי, ואז החלפה	ברירת המחדל המומלצת לטקסט עברי
optional	הפונט מוצג רק אם הגיע כמעט מיד; אחרת נשאר החלופי	כשקפיצת עימוד מפריעה יותר מהמראה
fallback	פשרה: חסימה קצרה וזמן החלפה מוגבל	אתרי תוכן עם גולשים מהנייד
block	טקסט בלתי נראה עד כמה שניות	כמעט אף פעם לטקסט רץ; אולי לאייקונים

ב-Google Fonts מוסיפים את הפרמטר &display=swap לכתובת, כפי שמוסבר בתיעוד ה-CSS2 של Google Fonts. שם מופיע גם הפרמטר text=, שמוריד רק את התווים של מחרוזת קצרה. הוא שימושי ללוגו או לכותרת אחת בפונט מיוחד.

איך מונעים קפיצה של העימוד כשהפונט מתחלף?

בוחרים פונט חלופי קרוב בגודל. ב-CSS רושמים אחרי הפונט העברי רשימת חלופות, למשל font-family: 'Heebo', Arial, sans-serif. Arial קיים כמעט בכל מכשיר ותומך בעברית, ולכן ההחלפה פחות בולטת.

למתקדמים: אפשר להגדיר @font-face נוסף לפונט החלופי עם size-adjust, כדי שגובה השורות יהיה כמעט זהה לפונט האמיתי. זה מקטין את ה-CLS כמעט לאפס, אבל דורש כיוונון ידני לכל פונט.

מה הטעויות הנפוצות עם פונטים בעברית?

שני פונטים ושישה משקלים: כל משקל שלא בשימוש הוא קובץ מיותר. בדקו בעיצוב מה באמת מופיע, ובדרך כלל 400 ו-700 מספיקים.

preload לכל קבצי הפונט: preload גוזל רוחב פס מוקדם. לפי web.dev, preload מתעלם מ-unicode-range, ולכן preload לקובץ הלטיני בעמוד עברי עלול להוריד קובץ שלא היה נדרש. טענו מראש רק את קובץ העברית.

הפונט נטען גם מקומית וגם מ-Google: קורה כשמעלים קבצים ושוכחים לכבות את הטעינה בתבנית. ב-Network תראו את אותו פונט משני דומיינים.

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

שאלות נפוצות

מדריכים קשורים

• וורדפרס בעברית: RTL, אזור זמן וקידוד
• Core Web Vitals: מה זה ואיך משפרים
• הגדרות מתקדמות ב-Breeze
• אתר אלמנטור מהיר
• סקירת אחסון קלאודוויז
• כל המדריכים בתחום: מדריכי מהירות וביצועים

מקורות

• Best practices for fonts – web.dev (אחסון מקומי, preconnect, preload)
• font-display – MDN Web Docs
• CSS API v2 – Google Fonts (display=swap, text=)
• HTTP cache partitioning – Chrome for Developers (Chrome 86)
• How to Use Breeze Preload Settings for Better Font Performance – Cloudways Knowledge Base
• מדידת גודל קבצים וזמני חיבור: בדיקה שלנו מחיבור ביתי בישראל, 07.11.2026, שש דגימות curl לכל שרת. מדידה אינדיקטיבית ממיקום אחד, לא מבחן ביצועים.

מקור רשמי: Breeze Preload Settings (Cloudways Knowledge Base). העמוד נכתב ונבדק על ידי עשהאל דרייר · עודכן: 07.11.2026

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