Thiếu tiêu đề phản hồi của tính năng Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS)
Trình duyệt:
- Firefox (3.5 trở lên)
- Internet Explorer (9 trở lên)
- Chrome (37 tuổi trở lên)
Tổng quan
Chrome, Firefox và các phiên bản mới hơn của Internet Explorer thực thi Cross-Origin Tiêu chuẩn Chia sẻ tài nguyên, nên chỉ hiển thị phông chữ trên web được phân phát với tiêu đề phản hồi “Access-Control-Allow-Origin” thích hợp. Vì Google Fonts xem được trên bất kỳ miền nào, phông chữ sẽ được phân phát cùng với phản hồi sau tiêu đề:
Access-Control-Allow-Origin:*
Nguyên nhân tiềm ẩn
Một số proxy có thể xoá tiêu đề khỏi phản hồi, sau đó trình duyệt sẽ không hiển thị phông chữ.
Đang chẩn đoán
Với Chrome, hãy kiểm tra thông báo cảnh báo liên quan trong Bảng điều khiển Công cụ cho nhà phát triển.
Với Firefox, người dùng có thể sử dụng tiện ích mở rộng Tiêu đề HTTP trực tiếp hoặc Android để xem tiêu đề phản hồi để xác nhận sự hiện diện của tiêu đề phản hồi CORS.
Đường liên kết
Phông chữ web không hiển thị trên Firefox khi plugin NoScript được cài đặt
Trình duyệt: * Firefox (3.5 trở lên)
Tổng quan
Firefox không hiển thị phông chữ trên web khi trình bổ trợ NoScript được cài đặt.
Nguyên nhân tiềm ẩn
Theo mặc định, trình bổ trợ NoScript sẽ tắt các quy tắc @font-face.
Giải pháp
Mở Tuỳ chọn NoScript, chuyển đến tab Nhúng và bỏ chọn: Cấm @font-face
Phông chữ của trang web không xuất hiện
Trình duyệt: * Tất cả
Tổng quan
Phông chữ trên web bạn sử dụng không xuất hiện.
Nguyên nhân tiềm ẩn
Đã xảy ra lỗi trong URL API hoặc một kiểu không được phông chữ hỗ trợ đã được yêu cầu.
Giải pháp
Đảm bảo URL được định dạng chính xác và trường hợp được tôn trọng trong tên của phông chữ (ví dụ: Droid Serif không phải là droid serif), cú pháp cho độ đậm và kiểu được tuân thủ, cũng như cú pháp để tải nhiều họ (xem tài liệu: Bắt đầu – Cú pháp. Khi phông chữ không hiển thị, việc nhìn vào nội dung của biểu định kiểu có thể cung cấp thêm thông tin về sự cố. Sao chép và dán URL vào trình duyệt và đảm bảo rằng bạn không thấy thông báo lỗi. Ví dụ: yêu cầu một trọng lượng không được hỗ trợ bởi Droid Serif sẽ xuất hiện thông báo lỗi sau:
/* 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. */
Phông chữ web trông dày hơn khi được sử dụng trong tiêu đề
Trình duyệt: * Tất cả
Tổng quan
Phông chữ trông dày hơn khi được sử dụng trong tiêu đề (h1, h2, v.v.) mặc dù phông chữ là trọng số bình thường (400).
Nguyên nhân tiềm ẩn
Trình duyệt đã tự động in đậm văn bản.
Giải pháp
Hãy đảm bảo chỉ định đúng độ đậm phông chữ trong quy tắc CSS khi áp dụng phông chữ cho tiêu đề:
h1 {
font-family: Lobster, cursive;
font-weight: 400;
}