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

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

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

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

הפונטים לא מוצגים ב־iPhone או iPad

הסיבה הנפוצה ביותר היא שאתם משתמשים בשרת IIS של ווינדוס. שרתים אלה לא מאפשרים לטעון קבצים שלא מוגדרים ע"י MIME type. אם זה המצב - עליכם להוסיף MIME type של "SVG -> image/svg+xml" בהגדרות השרת. לרשותכם הוראות של מייקרוסופט כיצד לעשות זאת.

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

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

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

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

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

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

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

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

הפונטים מופיעים מזוגזגים, חדים מידי או לא חדים מספיק

חשוב מאד לעבוד אך ורק עם הגדלים המומלצים לשימוש של הפונט. לכל וובפונט ולכל משקל של וובפונט יש גדלים בהם האותיות מוצגות בצורה אופטימלית. גדלים אלה מופיעים בעמוד הוראות הטמעה וגדלים מומלצים לשימוש. החל מגודל 49 פיקסל ומעלה כל הגדלים נראים אחלה על כל הדפדפנים!
שיטה נוספת היא לטעון גם את קובץ הSVG בטכניקה הזאת. שיטה זאת פחות מומלצת מכיוון שהיא עלולה לייצר בעיות אחרות עם דפדפנים מסויימים וגם כיוון שפורמט ה־SVG הוא פורמט ישן ולא נחוץ כיום.

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

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

לקריאה נוספת
איך להשתמש במשקלים של פונטים ב־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 באקספלורר, ועד כמה שאני זוכר גם בפיירפוקס ובספארי). גם בעיה ממש מוזרה - שפיץ שיוצא מהקצה למעלה.
מה שמעצבן הוא שפונטביט לא לוקחים אחריות על גדלים מסויימים שניתן לסמוך על כך שהם בטוחים לשימוש. הם מצפים מן המעצב/המתכנת/מנהל הפרוייקט לבחון את הגדלים השונים בדפדפנים השונים. לא חבל?
וכמובן שמבעס שהווב לא עובד לפי סטנדרטים, כפי שהוא בעצם היה אמור לפי החבר'ה שהגו אותו אי שם בתחילת הניינטיז. מיקרוסופט, גוגל ואפל רבות ובסוף אנחנו צריכים לעבוד שעות נוספות. ומכיוון שפיירפוקס וכרומיום (הבסיס לכרום) הם פרוייקטים בקוד פתוח וספארי מבוסס וובקיט שגם הוא קוד פתוח, ברור מי כאן מנסה להשליט דיקטטורה. השאלה היא רק – למה? הרי כל מי שעוסק קצת בעיצוב ווב, ובד"כ גם בתכנות ווב, שונא אותם. מה יוצא להם מזה?

תגובות פייסבוק