פתרון בעיות

חסרה כותרת תגובה של שיתוף משאבים בין מקורות (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.

קישורים

• https://developer.mozilla.org/En/HTTP_access_control
• https://www.w3.org/TR/cors/

גופני אינטרנט לא מופיעים ב-Firefox כאשר מותקן הפלאגין Script

דפדפנים: * Firefox (3.5 ומעלה)

סקירה כללית

Firefox אינו מציג גופני אינטרנט כאשר הפלאגין NoScript מותקן.

סיבה אפשרית

כברירת מחדל, הפלאגין NoScript משבית את כללי @font-face.

הפתרון

פותחים את אפשרויות NoScript, עוברים לכרטיסייה הטמעות ומבטלים את הסימון: Forbid @font-face

גופני האינטרנט לא מופיעים

דפדפנים: * הכול

סקירה כללית

גופני האינטרנט שבהם נעשה שימוש לא מופיעים.

סיבה אפשרית

יש שגיאה בכתובת ה-URL של ה-API, או שסגנון לא נתמך על ידי הגופן.

הפתרון

חשוב לוודא שהפורמט של כתובת ה-URL תקין, כי הפנייה מכבדת את שם הגופן (למשל, Droid Serif ולא droid SAR), וכן את התחביר של הסגנון והמשקל, וכן את התחביר לטעינת מספר משפחות (ראו את התיעוד: תחילת העבודה – תחביר. כאשר גופנים לא מופיעים, בחינת התוכן של גיליון הסגנונות יכולה לספק מידע נוסף על מה שקורה. מעתיקים ומדביקים את כתובת ה-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;
}