Dieses Dokument enthält einige technische Informationen dazu, was hinter den Kulissen passiert, wenn Sie eine Webschriftart mit der Google Fonts API anfordern.
Dieses Dokument enthält auch Informationen zum browserspezifischen Verhalten.
Wenn Sie die Fonts API verwenden möchten, müssen Sie diese Seite nicht lesen. Sie können sie jedoch verwenden, um die Leistung beim Seitenaufbau zu verbessern.
Was liefert die Google Fonts-API?
Wenn ein Browser eine Fonts API-Stylesheets sendet (wie in einem <link>-Tag auf deiner Webseite angegeben), stellt die Fonts API ein Stylesheet für den jeweiligen User-Agent bereit.
Eine Anfrage für Inconsolata aus Firefox gibt beispielsweise das folgende CSS zurück:
@font-face {
font-family: 'Inconsolata';
src: local('Inconsolata'), url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw') format('truetype');
}
Eine Anfrage von Internet Explorer hingegen gibt Folgendes zurück:
@font-face {
font-family: 'Inconsolata';
src: url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw');
}
Nach dem Herunterladen des CSS-Codes wird im Browser die Schriftart im entsprechenden Format heruntergeladen.
Browserspezifisches Verhalten
In diesem Abschnitt wird das Standardverhalten jedes Broschers mit Webschriftarten beschrieben. Diese Verhaltensweisen können Sie mit dem Web Font Loader steuern.
Eine Liste der unterstützten Browser findest du unter FAQs.
Google Chrome
Chrome rendert den Rest der Seite, aber bis die Schriftart geladen wurde, wird statt des Textes, der die Schriftart verwendet, ein leerer Bereich angezeigt.
Mozilla Firefox
Firefox zeigt den Text zuerst in der Standardschriftart an und rendert die Textanzeige dann noch einmal. Dieses Verhalten wird als „Flash-Text ohne Formatierung“ bezeichnet.
Apple Safari
Der Rest der Seite wird von Safari gerendert. Bis zum Laden der Schriftart wird anstelle der Textstelle ein leerer Bereich angezeigt.
Microsoft Internet Explorer
Der Rest der Seite wird im Internet Explorer gerendert, aber bis die Schriftart geladen ist, wird statt des Textes, der die Schriftart verwendet, ein leerer Bereich angezeigt.
Grundsätzlich kann das Verhalten von Internet Explorer je nach Placement und Existenz verschiedener Elemente variieren. Wenn du ein einheitliches Verhalten in allen Browsern aufrechterhalten möchtest, verwende den Web Font Loader. Du kannst beispielsweise festlegen, dass sich alle Browser wie Firefox verhalten.