การแก้ปัญหา

ไม่มีส่วนหัวการตอบกลับการแชร์ทรัพยากรข้ามโดเมน (CORS)

เบราว์เซอร์:

  • Firefox (3.5 ขึ้นไป)
  • Internet Explorer (9 ขึ้นไป)
  • Chrome (37 ขึ้นไป)

ภาพรวม

Chrome, Firefox และ Internet Explorer เวอร์ชันใหม่กว่าจะบังคับใช้มาตรฐานการแชร์ทรัพยากรแบบข้ามต้นทาง ดังนั้นจึงแสดงผลเฉพาะแบบอักษรเว็บที่แสดงพร้อมส่วนหัวการตอบกลับ “Access-Control-Allow-Origin” ที่เหมาะสม เนื่องจากผู้ชมอาจดู Google Fonts ในโดเมนใดก็ได้ แบบอักษรดังกล่าวจะแสดงในส่วนหัวการตอบกลับต่อไปนี้

Access-Control-Allow-Origin:*

สาเหตุที่เป็นไปได้

พร็อกซีบางรายการอาจตัดส่วนหัวออกจากการตอบกลับ ซึ่งเบราว์เซอร์จะไม่แสดงแบบอักษร

การวินิจฉัย

เมื่อใช้ Chrome ให้ตรวจสอบข้อความเตือนที่เกี่ยวข้องในคอนโซล DevTools

เมื่อใช้ Firefox ส่วนขยายหนึ่งๆ จะใช้ส่วนขยาย Firebug หรือ Live HTTP Headers เพื่อดูส่วนหัวการตอบกลับเพื่อยืนยันว่ามีส่วนหัวการตอบกลับ CORS ได้

แบบอักษรเว็บจะไม่แสดงใน Firefox เมื่อติดตั้งปลั๊กอิน NoScript

เบราว์เซอร์: * Firefox (3.5 ขึ้นไป)

ภาพรวม

Firefox จะไม่แสดงแบบอักษรสําหรับเว็บเมื่อติดตั้งปลั๊กอิน NoScript

สาเหตุที่เป็นไปได้

โดยค่าเริ่มต้น ปลั๊กอิน NoScript จะปิดใช้กฎ @font-face

โซลูชัน

เปิดตัวเลือก NoScript ไปที่แท็บ "การฝัง" แล้วยกเลิกการเลือก: 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;
}