טעינת פונטים באתר היא האופן שבו הדפדפן מוריד את קובצי הגופן ומחליט מה להציג בזמן שהם עדיין לא הגיעו. ההחלטה הזו נשלטת בעיקר על ידי התכונה font-display ב-CSS: swap מציג מיד טקסט בפונט חלופי ומחליף כשהפונט מגיע, optional משתמש בפונט רק אם הוא הגיע כמעט מיד, ו-block מסתיר את הטקסט לזמן קצר עד שהפונט נטען. הבחירה משפיעה על שלושה דברים בבת אחת: כמה מהר הגולש רואה טקסט, האם העמוד "קופץ" כשהפונט מתחלף, וכמה נתונים יורדים. במאמר הזה אני מסביר איך עושים את זה נכון — כולל מה שחשוב במיוחד בעברית.
ערכי font-display
לפי MDN, כל ערך מגדיר שני פרקי זמן: תקופת "חסימה", שבה הטקסט מוסתר, ותקופת "החלפה", שבה הפונט עדיין יכול להחליף את החלופי אם הוא מגיע:
| ערך | חסימה | החלפה | בפועל |
|---|---|---|---|
| block | קצרה | ללא הגבלה | טקסט נעלם לרגע, ואז מופיע בפונט הנכון |
| swap | זעירה | ללא הגבלה | טקסט מיד בפונט חלופי, ואז מתחלף |
| fallback | זעירה | קצרה | אם הפונט מאחר — נשארים עם החלופי |
| optional | זעירה | אין | הפונט מוצג רק אם הגיע כמעט מיד |
| auto | לפי הדפדפן | ההתנהגות נקבעת על ידי הדפדפן — עדיף להגדיר במפורש | |
לפי המדריך של web.dev לפונטים, swap מציג טקסט הכי מהר אבל עלול לגרום לקפיצה כשהפונט מתחלף, ואילו optional מונע את הקפיצה אבל עלול להציג את הפונט החלופי עד הביקור הבא. web.dev מציע שילוב: swap לפונט של המותג והכותרות, optional לטקסט הגוף.
שישה כללים לפונטים מהירים
1. רק WOFF2
WOFF2 הוא הפורמט עם הדחיסה הטובה ביותר והתמיכה הרחבה ביותר. web.dev מצטט מומחים שממליצים להשתמש רק בו ולשכוח מכל השאר — אין היום סיבה להגיש TTF או WOFF ישן לדפדפנים מודרניים.
2. חלוקה לפי שפה (subsetting)
פונט מלא כולל אלפי תווים שהאתר לא צריך. התכונה unicode-range מאפשרת לפצל את הפונט לקבצים לפי טווח תווים, והדפדפן מוריד רק את הקובץ שנדרש לטקסט בעמוד. באתר עברי זה אומר בדרך כלל קובץ עברי וקובץ לטיני נפרדים: עמוד שכולו עברית לא יוריד את התווים הלטיניים המורחבים, ולהפך. באתר הזה, למשל, Heebo מוגש בקבצי WOFF2 נפרדים לעברית ולטינית, עם unicode-range לכל אחד. לפני שמפצלים פונט, בודקים שהרישיון מאפשר זאת.
3. פחות משקלים ופחות משפחות
כל משקל — רגיל, מודגש, דק — הוא קובץ נפרד. ארבע משפחות בשלושה משקלים כל אחת הן שנים-עשר קבצים. פונט משתנה (variable font) מכיל את כל המשקלים בקובץ אחד, ולעיתים קרובות זה הפתרון היעיל ביותר כשצריך כמה משקלים. אפשרות אחרת: פונט מערכת לטקסט הגוף, ופונט מותאם רק לכותרות.
4. preload רק לפונטים הקריטיים
פונטים מוגדרים בתוך קובץ CSS, ולכן הדפדפן מגלה אותם מאוחר. טעינה מראש של הפונט העיקרי מקצרת את הזמן, אבל web.dev מזהיר להשתמש בזה במשורה: כל preload מתחרה על רוחב הפס, והוא גם עוקף את הבחירה החכמה לפי unicode-range — הקובץ יורד גם אם העמוד לא צריך אותו. הפרטים הטכניים, כולל למה חובה crossorigin, במאמר רמזי טעינה.
5. אירוח עצמי — אבל לא כאמונה
web.dev מציין שאירוח עצמי של פונטים לא מהיר אוטומטית מ-Google Fonts; בלי CDN ו-HTTP/2, אין הבטחה שהוא יהיה מהיר יותר. מה שהוא כן נותן: אין חיבור נוסף לדומיין חיצוני, שליטה מלאה בקבצים ובחלוקה, ואין העברה של כתובת ה-IP של הגולש לצד שלישי. אתר שיושב מאחורי CDN, כמו האתר הזה מאחורי Cloudflare, נהנה מהיתרונות בלי החיסרון. על פונטים עבריים, רישוי ואירוח כתבתי בהרחבה במאמר פונטים בעברית לאתר.
6. לצמצם את הקפיצה בהחלפה
כשהפונט החלופי והפונט האמיתי שונים בגודלם, ההחלפה מזיזה שורות — וזה נספר ב-CLS. התכונה size-adjust ותכונות הכוונון של @font-face מאפשרות להתאים את מידות הפונט החלופי לפונט האמיתי, כך שההחלפה כמעט לא מורגשת. פירוט על תזוזות תצוגה במאמר CLS: למה העמוד קופץ.
פונטים של אייקונים
web.dev ממליץ להחליף פונטים של אייקונים ב-SVG. פונט אייקונים שלם נטען כדי להציג כמה סמלים, הפונט החלופי שלו נראה שונה לגמרי וגורם לקפיצות, ו-SVG גם נגיש יותר לקוראי מסך.
איך בודקים
- לשונית Network בכלי המפתחים, עם סינון Font: כמה קבצים יורדים, באיזה גודל ומאיזה דומיין.
- מפל טעינה — האם הפונט מתחיל לרדת מוקדם או רק אחרי ה-CSS. ראו GTmetrix ו-WebPageTest.
- חיבור איטי מדומה — רואים בעיניים אם הטקסט נעלם, או קופץ כשהפונט מתחלף.
שאלות נפוצות
Google Fonts או אירוח עצמי?
שתי האפשרויות יכולות להיות מהירות. אירוח עצמי נותן שליטה ופרטיות, ובאתר עם CDN הוא בדרך כלל הבחירה שלי. מה שחשוב יותר: WOFF2, מעט קבצים, ו-font-display מוגדר.
הפונט העברי שלי כבד מאוד. מה עושים?
בודקים כמה משקלים באמת בשימוש, מפצלים לעברית ולטינית, ושוקלים פונט משתנה. לעיתים קרובות אפשר להוריד ככה חלק גדול מהמשקל בלי לשנות את העיצוב.
פונטים הם חלק מהעיצוב וחלק מהביצועים — ובתבנית שאני בונה הם מוגדרים כך מההתחלה. אם האתר שלכם טוען יותר מדי פונטים, ראו שיפור מהירות אתר או כתבו לי.
אהבתם את המאמר?
