גופן עברי לאתר צריך לעמוד בארבעה מבחנים: לכלול אותיות עבריות איכותיות (ולא רק לטיניות), להיות קריא בגדלים קטנים ובטלפון, להיטען מהר, ולהיות ברישיון שמתיר שימוש באתר. את רוב הבעיות של גופנים באתרים בעברית אפשר לפתור בארבעה צעדים טכניים: לארח את הגופן באתר עצמו, לחתוך אותו לתווים שבשימוש (עברית ולטינית בנפרד), להשתמש בגופן משתנה במקום קובץ לכל משקל, ולהגדיר font-display: swap כדי שהטקסט יופיע מיד.
למה גופנים בעברית הם אתגר מיוחד
- לא כל גופן "פופולרי" כולל עברית. הרבה גופנים מעוצבים היטב באנגלית פשוט חסרים אותיות עבריות — והדפדפן מחליף אותן בגופן מערכת אחר, באמצע אותה כותרת.
- עברית ולטינית באותו משפט. שמות מותגים, מספרים וכתובות אתרים מופיעים בתוך טקסט עברי. הגופן צריך לכלול את שניהם, ושניהם צריכים להיראות שייכים זה לזה.
- קריאות בגדלים קטנים. אותיות עבריות דומות זו לזו (ב/כ, ד/ר, ה/ח, ו/ז) — גופן דקורטיבי מדי הופך טקסט רץ לקשה לקריאה, במיוחד בטלפון.
- משקל הקבצים. גופן שכולל עברית, לטינית ומשקלים רבים יכול להיות כבד, וכל קובץ נוסף מאט את הטעינה.
איך בוחרים גופן עברי לאתר
| שאלה | למה היא חשובה |
|---|---|
| יש עברית ולטינית באותו גופן? | כדי שמילים באנגלית בתוך טקסט עברי לא יופיעו בגופן אחר |
| יש מספיק משקלים? | לרוב צריך לפחות רגיל ומודגש; גופן משתנה נותן את כל הטווח בקובץ אחד |
| קריא בגודל קטן ובטלפון? | טקסט רץ, תפריטים ושדות טופס — לא רק כותרות |
| מה הרישיון? | שימוש באתר דורש רישיון שמתיר הטמעה ברשת |
| כמה הוא שוקל? | משפיע ישירות על מהירות הטעינה |
הגישה הנפוצה והבטוחה: גופן אחד ברור לטקסט, ולכל היותר גופן שני לכותרות. כל גופן נוסף הוא עוד קבצים להוריד ועוד סיכון לחוסר אחידות.
רישוי: מה צריך לבדוק
גופן הוא תוכנה, והשימוש בו כפוף לרישיון. שתי הקטגוריות העיקריות:
- גופנים ברישיון פתוח — למשל רישיון SIL Open Font License (OFL), שמתיר שימוש, הטמעה באתרים והפצה, כולל שימוש מסחרי. רבים מהגופנים העבריים ב-Google Fonts מופצים ברישיון הזה.
- גופנים מסחריים — נרכשים מהמעצב או מבית הגופנים, ולעיתים הרישיון לאתר נפרד מהרישיון לדפוס, ומוגבל לפי מספר צפיות או דומיינים.
לפני שמשתמשים בגופן, קוראים את קובץ הרישיון שמגיע איתו. אם גופן "חינמי" הגיע מאתר הורדות לא רשמי — כדאי לבדוק את הרישיון במקור.
ביצועים: איך טוענים גופן עברי מהר
לארח את הגופן באתר עצמו
טעינה משירות גופנים חיצוני מוסיפה חיבור לשרת נוסף לפני שהטקסט מופיע בגופן הנכון. כשהקבצים יושבים באתר, הם נטענים מאותו מקום כמו שאר הקבצים. ברישיון OFL מותר לארח את הגופן בעצמכם.
לחתוך לתווים שבשימוש
במקום קובץ אחד עם כל התווים, מחלקים את הגופן לקבצים לפי כתב — עברית, לטינית, לטינית מורחבת — ומגדירים לכל אחד unicode-range. הדפדפן מוריד רק את הקבצים שהעמוד באמת צריך.
גופן משתנה (variable font)
גופן משתנה כולל את כל טווח המשקלים — מדק ועד מודגש — בקובץ אחד, במקום קובץ נפרד לכל משקל. כשהאתר משתמש בכמה משקלים, זה חוסך בקשות ומשקל.
font-display: swap
ההגדרה הזו אומרת לדפדפן להציג את הטקסט מיד בגופן חלופי, ולהחליף לגופן הנכון כשהוא נטען — במקום להשאיר את הטקסט בלתי נראה. כדאי לבחור גופן חלופי דומה בגודל, כדי שההחלפה לא תגרום לתוכן "לקפוץ".
טעינה מוקדמת לקובץ הראשי
עם preload לקובץ העברי, הדפדפן מתחיל להוריד אותו מוקדם יותר. לפי Web Almanac 2025, 87% מעמודי המובייל משתמשים בגופן רשת, אבל רק כ-16% טוענים אותו מראש.
דוגמה: הגופן באתר הזה
האתר הזה משתמש בגופן Heebo — גופן משתנה ברישיון SIL Open Font License, כפי שמופיע בקובץ הרישיון שמגיע איתו — לכל הטקסט, כולל הכותרות. הגופן מתארח באתר עצמו, בלי שום בקשה לשירות גופנים חיצוני, ומחולק לשלושה קבצים לפי כתב:
| קובץ | מה הוא כולל | גודל |
|---|---|---|
| heebo-hebrew.woff2 | האותיות העבריות | ≈12 KB |
| heebo-latin.woff2 | לטינית בסיסית, מספרים וסימנים | ≈30 KB |
| heebo-latin-ext.woff2 | לטינית מורחבת | ≈15 KB |
לכל קובץ מוגדר unicode-range משלו, כך שעמוד בעברית לא מוריד את הלטינית המורחבת אם אין בו תווים כאלה, ולכולם מוגדר font-display: swap. כל טווח המשקלים שהאתר משתמש בו נמצא בתוך הקבצים האלה, בלי קובץ נפרד לכל משקל.
נגישות וגופנים
- גודל בסיס נדיב לטקסט רץ, ותמיכה בהגדלה בלי שהעמוד יישבר.
- ניגודיות מספקת — גופן דק בצבע אפור בהיר נכשל בדרישות התקן. ראו מה זה UI.
- לא טקסט בתוך תמונות — קורא מסך לא יכול לקרוא אותו, והוא לא מתאים את עצמו לגודל המסך.
טעויות נפוצות
- גופן לטיני לכותרות בלי עברית — והדפדפן מערבב גופנים באמצע הכותרת.
- חמישה משקלים בקבצים נפרדים כשבפועל משתמשים בשניים.
- טעינה מכמה שירותים חיצוניים — כל אחד עוד חיבור ועוד עיכוב.
- גופן בלי רישיון מתאים לשימוש ברשת.
גם האייקון הקטן של האתר — הפביקון — הוא חלק מהזהות החזותית; ראו מדריך הפביקון.
הגופן הוא חלק מהעיצוב ומהביצועים של האתר כאחד — ראו גם Core Web Vitals ובניית אתר מימין לשמאל. כל אתר שאני בונה מקבל גופן עברי מתארח, חתוך ומהיר — ראו שיפור מהירות אתר, או ספרו לי על האתר שלכם.
אהבתם את המאמר?
