טיפול בבעיות הטמעה של וובפונטס

1. הפונטים לא מוצגים בשום דפדפן

כנראה שההטמעה לא התבצעה בצורה נכונה. אולי לא העליתם את הפונטים אל תיקית הפונטים שלכם? או שפשוט לא קראתם להם דרך ה־CSS. חזרו אל הוראות ההטמעה שלנו ועברו על כל השלבים. אם זה עדיין לא עובד - יש סיכוי (נדיר) שמופיע בקובץ ה־htaccess שלכם קוד כלשהו שמפריע לטעינת הקבצים.

2. תזוזות מוזרות ומילים שנשברות לשתי שורות ב־Safari?

בספארי (webkit) קורה באג מוזר כשמשתמים בפונטים עבריים עם אופן־טייפ פיצ׳רז ברכיבי flexbox.
כדי לפתור את הבעיה תצטרכו לותר על אופן־טייפ פיצ׳רז רק בספארי, באופן כזה:

_::-webkit-full-page-media, _:future, :root body {
    font-kerning: none;
}

או לחלופין לותר על flexbox.

3. אותיות מתחברות ועולות זו על זו

רוב הסיכויים שהבעיה היא שאתם משתמשים בקבצים לא מקוריים של הפונט. יכול להיות {שהמתכנת/ת} שלכם שינה אותם או ביצע בהם המרה כלשהי? אם כן זה משבש את הקובץ וגם אסור על פי תנאי השימוש שלנו.
יש להטמיע אך ורק את קובצי ה־woff ו־woff2 שקיבלתם מאיתנו. הקבצים המקוריים והעדכניים נמצאים באיזור האישי ויש להשתמש בהם כמו שהם.

4. קווים תחתונים לא אחידים בין דפדפנים

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

text-decoration-thickness: 0.05em;
text-underline-offset: 0.05em;

5. הפונטים לא מוצגים בחלק מהדפדפנים

יתכן ואתם מאכסנים את קובצי הפונט בדומיין אחר מזה של האתר שלכם. דפדפן פיירפוקס ו־IE9+ דורשים שכל הקבצים של הפונט ישבו על אותו דומיין של האתר. במידה ואתם משתמשים ב־Apache, אתם צריכים להגדיר בקובץ ה־htaccess שלכם גישה אל קובצי פונט המאוכסנים על דומיין אחר.
סיבה נפוצה נוספת לבעיה זאת היא שאתם משתמשים בשרת IIS של ווינדוס - אליו יש להוסיף לפעמים באופן ידני MIME type להגדרות השרת: "WOFF -> application/x-font-woff". לרשותכם הוראות כיצד לעשות זאת.

6. הפונטים לא נטענים על דפדפן IE9+

דפדפני אקספלורר 9 ומעלה דורשים שקובצי הגופן ישבו על אותו דומיין של האתר. יש לודא שכך המצב (ע״ע).

7. הפונט נטען אך אין הבדלים בין המשקלים בדפדפן IE

הפיתרון לבעיה (היחסית נדירה) הזאת הוא להגדיר בתחילת מסמך ה־css כל משקל של הפונט כמשפחה נפרדת עם שם שונה, במשקל רגיל. למשל font-family: atlas-regular ו־font-family: atlas-bold. ובהמשך מסמך ה־css ה־font:weight תמיד יוגדר כ־regular, וה־font-family יקבל את שם המשפחה החדש.

8. עוד כמה הערות על פונטים לווב

• נכון לשנת 2024 הטמעת וובפונטס כטקסט־חי בתוך אימיילים או ניוזלטרים תעבוד בעיקר במערכות הפעלה של Apple.
• מומלץ להשתמש במשקלים ה״דקים״ (קל, צר, דק ודקיק) רק בכותרות גדולות, ולא כטקסט־רץ.
• אם אתם מתכוונים להטמיע במסמך HTML רק משקל רגיל, לא מומלץ להגדיר font-weight: bold כי אתם תקבלו בולד מדומה (faux bold) ועל רוב הדפדפנים החדשים יופיע בדיוק כמו font-weight: normal. מהסיבה הזו חשוב לדאוג להטמיע גם את המשקל הרגיל וגם את הבולד.
• בקוד ה־@font-face לא מומלץ להטמיע את קובץ ה־svg. זהו פורמט שעושה בעיות – בעיקר בעברית ולא נחוץ כיום (אלא אם חשוב לכם לתמוך באייפון 3 ומטה). עוד על פורמטים של וובפונט כאן.
• במקרים נדירים סימן הגרשיים (״) עלול לבלבל את קוד ה-html. במידה ומילים המכילות תו זה גורמות לתוכן ״להיעלם״ נסו להחליף את הסימן של הגרשיים עם html entity המייצג את הסימן: ". או לשדרג את הפונט לגרסה הכי עדכנית.

לקריאה נוספת

איך להטמיע פונטים באתרים בשנת 2024 כמו רוק־סטארים

מדריך הטמעת פונטים באתרים

ועוד:
איך להשתמש במשקלים של פונטים ב־css
How to Bulletproof @font-face Web Fonts
באגים של font-face
The @Font-Face Rule And Useful Web Font Tricks
Using @font-face
שילוב בין פונטים באמצעות unicode-range