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

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

מאת

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

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

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

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

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

 

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

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

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

הפונטים לא נטענים על דפדפן IE

האם אתם גולשים ב־Internet Explorer על מחשב אמיתי עם מערכת הפעלה ווינדוס? או שאתם משתמשים בשירות כמו Adobe BrowserLab? רבים משירותי צילומי המסך האלה לא מרנדרים @font-face על דפדפני IE. בדקו את האתר על מחשב אמיתי.

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

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

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

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

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

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

לקריאה נוספת

 

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

 

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

ועוד:
איך להשתמש במשקלים של פונטים ב־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
דניאל

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