חסרה כותרת תגובה של שיתוף משאבים בין מקורות (CORS)
דפדפנים:
- Firefox (3.5+)
- Internet Explorer (9+)
- Chrome (גרסה 37 ומעלה)
סקירה כללית
Chrome, Firefox וגרסאות חדשות יותר של Internet Explorer אוכפים את מודל חוצה-המקורות בתקן 'שיתוף משאבים', ובכך לעבד רק גופני אינטרנט שמוצגים עם כותרת התגובה המתאימה מסוג Access-Control-Allow-Origin. כפי ש-Google Fonts עשוי תוצג בכל דומיין, הגופנים מוצגים עם התגובה הבאה כותרת:
Access-Control-Allow-Origin:*
הסיבה הפוטנציאלית
שרתי proxy מסוימים עשויים להסיר את הכותרת מהתגובה. לאחר מכן הדפדפן לא תעבד את הגופנים.
אבחון
ב-Chrome, מחפשים את הודעת האזהרה הרלוונטית מסוף כלי הפיתוח.
ב-Firefox, אפשר להשתמש בתוספים Firebug או Live HTTP Headers כדי לצפות בכותרות התגובה כדי לאשר את נוכחות כותרת התשובה של CORS.
קישורים
גופן Web Fonts לא מופיע ב-Firefox כשהפלאגין של NoScript מותקן
דפדפנים: * Firefox (3.5+)
סקירה כללית
ב-Firefox לא מוצגים גופן אינטרנט כשמותקן הפלאגין NoScript.
הסיבה הפוטנציאלית
כברירת מחדל, הפלאגין NoScript משבית את הכללים מסוג @font-face.
פתרון
פותחים את האפשרויות של NoScript, עוברים לכרטיסייה Embeddings ומבטלים את הסימון של: Forbid @font-face
הגופנים באינטרנט אינם מוצגים
דפדפנים: * הכול
סקירה כללית
גופן האינטרנט שבו נעשה שימוש אינם מוצגים.
הסיבה הפוטנציאלית
יש שגיאה בכתובת ה-URL של ה-API, או סגנון שהגופן לא תומך בו נשלחה בקשה.
פתרון
חשוב לוודא שכתובת ה-URL בפורמט הנכון, ושהמקרה מכבד שם הגופן (למשל Droid Serif לא droid serif), שהתחביר לציון משקל וסגנונות נלקחים בחשבון וגם בתחביר לטעינת כמה משפחות (עיינו בקטע תיעוד: תחילת העבודה - תחביר. כאשר גופנים לא מופיעים, עיון בתוכן של גיליון הסגנונות יכול לספק מידע נוסף על הבעיה. להעתיק ולהדביק את כתובת ה-URL ב בדפדפן ולוודא שלא מופיעות הודעות שגיאה. לדוגמה: בקשת אין תמיכה במשקל על ידי יופיע הכיתוב Droid Serif את הודעת השגיאה הבאה:
/* Droid Serif (style: normal, weight: 300) is not available */ /* However, style: normal, weight: normal is available */ /* However, style: italic, weight: normal is available */ /* However, style: normal, weight: bold is available */ /* However, style: italic, weight: bold is available */ /* Not supported. */
גופנים באינטרנט נראים עבים יותר כאשר נעשה בהם שימוש בכותרת
דפדפנים: * הכול
סקירה כללית
הגופנים נראים עבים יותר כשנעשה בהם שימוש בכותרת (h1, h2 וכו') על אף שהגופן הוא משקל רגיל (400).
הסיבה הפוטנציאלית
הדפדפן מדגיש את הטקסט באופן אוטומטי.
פתרון
הקפידו לציין בכלל ה-CSS את משקל הגופן הנכון, כאשר החלת גופן על כותרת:
h1 {
font-family: Lobster, cursive;
font-weight: 400;
}