Brak nagłówka odpowiedzi CORS
Przeglądarki:
- Firefox (3.5 i nowsze)
- Internet Explorer (9 i nowsze)
- Chrome (37 i nowsze)
Omówienie
Chrome, Firefox i nowsze wersje Internet Explorera wymuszają stosowanie różnych źródeł danych standardem udostępniania zasobów, więc renderują one tylko czcionki internetowe obsługiwane odpowiedni nagłówek odpowiedzi „Access-Control-Allow-Origin”. Ponieważ Google Fonts może w dowolnej domenie, czcionki będą wyświetlane z następującą odpowiedzią nagłówek:
Access-Control-Allow-Origin:*
Możliwa przyczyna
Niektóre serwery proxy mogą usuwać nagłówek z odpowiedzi, po czym przeglądarka nie wyrenderuje czcionek.
Diagnozuję
W Chrome poszukaj odpowiedniego komunikatu ostrzegawczego w Konsola przy użyciu Narzędzi deweloperskich.
W przeglądarce Firefox można użyć rozszerzenia Firebug lub Live HTTP Headers, aby wyświetl nagłówki odpowiedzi, aby potwierdzić obecność nagłówka odpowiedzi CORS.
Linki
Czcionki internetowe nie wyświetlają się w Firefoksie, gdy jest zainstalowana wtyczka NoScript
Przeglądarki: * Firefox (3.5 lub nowszy),
Omówienie
Firefox nie wyświetla czcionek internetowych, gdy jest zainstalowana wtyczka NoScript.
Możliwa przyczyna
Domyślnie wtyczka NoScript wyłącza reguły @font-face.
Rozwiązanie
Otwórz Opcje NoScript, przejdź na kartę Embeddings i odznacz pole Forbid @twarz-czcionki
Czcionki internetowe nie są widoczne
Przeglądarki: * Wszystkie
Omówienie
Użyte czcionki internetowe nie są widoczne.
Możliwa przyczyna
W adresie URL interfejsu API wystąpił błąd lub styl, który nie jest obsługiwany przez czcionkę wysłano prośbę.
Rozwiązanie
Sprawdź, czy adres URL ma prawidłowy format oraz wielkość liter nazwy czcionki (np. Droid Serif, a nie droid szeryfowa), że składnia wagi respektowane są style i style, a także składnia wczytywania wielu rodzin (zobacz dokumentacji: Getting Started – Składnia (Pierwsze kroki – składnia). Jeśli czcionki nie są wyświetlane, przejrzenie zawartości arkusza stylów może pomóc uzyskać więcej informacji na temat tego, co jest nie tak. Skopiuj i wklej adres URL w polu przeglądarki i sprawdź, czy nie pojawia się żaden komunikat o błędzie. Możesz na przykład poprosić o waga nieobsługiwana przez Droid Serif wyświetli następujący komunikat o błędzie:
/* 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. */
Czcionki internetowe są większe, gdy są używane w nagłówku
Przeglądarki: * Wszystkie
Omówienie
Czcionki są grubsze, gdy są używane w nagłówku (h1, h2 itp.), mimo że czcionka to normalna waga (400).
Możliwa przyczyna
Przeglądarka automatycznie pogrubiła tekst.
Rozwiązanie
Upewnij się, że w regule CSS określono prawidłową wagę czcionki zastosowanie czcionki do nagłówka:
h1 {
font-family: Lobster, cursive;
font-weight: 400;
}