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

ביצעתם את ההוראות לפי מדריך הטמעת הפונטים שלנו אבל עדיין יש בעיות? קורה. בדיוק בשבילכם הכנו מדריך שסוקר את כל הבעיות הנפוצות שייתכנו בהטמעת פונטים לווב בעברית ודרכים כיצד לתקן אותן

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


הוסף/י תגובה

6 תגובות

טיפים מצויינים. לפני כמה שבועות נתקלתי בתופעה הקיצונית בה פונט מעל גודל של 50 רונדר לא טוב. "החלוצים" במשקל בינוני של חברה מסויימת (אני לא אנקוב בשמות). (השי"ן בגודל 60 באקספלורר, ועד כמה שאני זוכר גם בפיירפוקס ובספארי). גם בעיה ממש מוזרה - שפיץ שיוצא מהקצה למעלה.
מה שמעצבן הוא שפונטביט לא לוקחים אחריות על גדלים מסויימים שניתן לסמוך על כך שהם בטוחים לשימוש. הם מצפים מן המעצב/המתכנת/מנהל הפרוייקט לבחון את הגדלים השונים בדפדפנים השונים. לא חבל?
וכמובן שמבעס שהווב לא עובד לפי סטנדרטים, כפי שהוא בעצם היה אמור לפי החבר'ה שהגו אותו אי שם בתחילת הניינטיז. מיקרוסופט, גוגל ואפל רבות ובסוף אנחנו צריכים לעבוד שעות נוספות. ומכיוון שפיירפוקס וכרומיום (הבסיס לכרום) הם פרוייקטים בקוד פתוח וספארי מבוסס וובקיט שגם הוא קוד פתוח, ברור מי כאן מנסה להשליט דיקטטורה. השאלה היא רק – למה? הרי כל מי שעוסק קצת בעיצוב ווב, ובד"כ גם בתכנות ווב, שונא אותם. מה יוצא להם מזה?

05
דניאל

אני מוריד טקסט מנוקד ומכניס אותו לאילוסטרייטור לעיצוב ו---כל הניקוד בורח צעד קדימה. לא עוזר שינוי פונט ולא שומדבר. מה עושים?