Fehlerbehebung

Fehlender CORS-Antwortheader (Cross-Origin Resource Sharing)

Browser:

  • Firefox (ab Version 3.5)
  • Internet Explorer (9 und höher)
  • Chrome (37+)

Übersicht

Chrome, Firefox und neuere Versionen von Internet Explorer erzwingen die Cross-Origin-Sicherheit Standard für die Freigabe von Ressourcen. Dadurch werden nur Web-Schriftarten gerendert, die mit dem entsprechenden „Access-Control-Allow-Origin“-Antwortheader. Wie Google Fonts auf einer beliebigen Domain angezeigt werden kann, werden die Schriftarten mit der folgenden Antwort bereitgestellt: Überschrift:

Access-Control-Allow-Origin:*

Mögliche Ursache

Einige Proxys entfernen möglicherweise den Header aus der Antwort. Danach wird der Browser werden die Schriftarten nicht gerendert.

Wird diagnostiziert

Suchen Sie in Chrome im DevTools-Konsole

Bei Firefox können Sie entweder die Erweiterung Firebug oder Live HTTP Headers verwenden, um Sehen Sie sich die Antwortheader an, um das Vorhandensein des CORS-Antwortheaders zu prüfen.

In Firefox werden keine Web-Schriftarten angezeigt, wenn das NoScript-Plug-in installiert ist

Browser: * Firefox (ab Version 3.5)

Übersicht

Firefox zeigt keine Web-Schriftarten an, wenn das NoScript-Plug-in installiert ist.

Mögliche Ursache

Standardmäßig deaktiviert das NoScript-Plug-in @font-face-Regeln.

Lösung

Öffnen Sie die NoScript-Optionen, gehen Sie zur Registerkarte Einbettungen und deaktivieren Sie die Option Verboten. @font-face

Web-Schriftarten werden nicht angezeigt

Browser: * Alle

Übersicht

Die verwendeten Webschriftarten werden nicht angezeigt.

Mögliche Ursache

Die API-URL enthält einen Fehler oder ein Stil, der von der Schriftart nicht unterstützt wird wurde angefordert.

Lösung

Stellen Sie sicher, dass die URL ordnungsgemäß formatiert ist und die Groß-/Kleinschreibung im Name der Schrift (z.B. Droid Serif und nicht Droid-Serif), der die Syntax der Schriftstärke respektiert wird, sowie die Syntax zum Laden mehrerer Familien (siehe Dokumentation: Erste Schritte – Syntax. Wenn keine Schriftarten angezeigt werden, kann ein Blick auf den Inhalt des Stylesheets Aufschluss darüber geben, um zu erfahren, was schiefgeht. Kopieren Sie die URL und fügen Sie sie in die und vergewissern Sie sich, dass keine Fehlermeldung angezeigt wird. Wenn Sie beispielsweise ein Gewicht nicht unterstützt von Droid Serif wird angezeigt. die folgende Fehlermeldung angezeigt:

/* 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. */

Web-Schriftarten sehen dicker aus, wenn sie in einer Überschrift verwendet werden.

Browser: * Alle

Übersicht

Die Schriftarten sehen dicker aus, wenn sie in einer Überschrift (h1, h2 usw.) verwendet werden, obwohl die Schriftart eine normale Gewichtung (400) ist.

Mögliche Ursache

Der Browser hat den Text automatisch fett formatiert.

Lösung

Achten Sie darauf, dass in Ihrer CSS-Regel die richtige Schriftstärke angegeben ist, wenn Schriftart auf eine Überschrift anwenden:

h1 {
 font-family: Lobster, cursive;
 font-weight: 400;
}