Der Einbettungscode legt fest, wie Web-Schriften auf Ihre Website im Browser oder in eine HTML-E-Mail im E-Mail-Client geladen werden.
Der Standard- und der @import-Einbettungscode verwenden nur CSS für das Laden von Schriften (kein JavaScript). Sie können verwendet werden, um Webseiten, HTML-E-Mails oder Newslettern, Google AMP und vielen anderen Arten von Projekten, die Web-Schriften unterstützen, Schriften hinzuzufügen. JavaScript wird außerdem für dynamische Untergruppen beim Laden von Schriften verwendet. Dies wird zur Bereitstellung ostasiatischer Web-Schriften benötigt.
Der Einbettungscode zu all Ihren Projekten ist auf der Seite mit den Web-Projekten zu finden.
Standard-Einbettungscode
Beim Standard-Einbettungscode handelt es sich um ein einzelnes <link>-Tag, das das Webprojekt-CSS aus dem Schriften-Netzwerk im Browser (use.typekit.net) lädt.
Um den Standard-Einbettungscode für Ihr Projekt zu finden, besuchen Sie die Seite mit den Web-Projekten. Fügen Sie diesen Einbettungscode dem <head>-Tag auf Ihrer Website hinzu.
Der @import-Einbettungscode kann direkt in Ihrem CSS-Stylesheet verwendet werden. Um den @import-Einbettungscode für Ihren Baukasten zu finden, besuchen Sie die Seite mit den Web-Projekten und klicken Sie dann auf die Option „@import-Link“.
Fügen Sie ihn zwischen die style-Tags im <head>-Bereich Ihrer Website ein:
Oder platzieren Sie ihn am Anfang Ihrer CSS-Datei:
Wenn Sie den @import-Einbettungscode verwenden, muss er sich am Anfang des <style>-Tags bzw. der CSS-Datei befinden. Dasselbe gilt für sämtliche anderen @import-Anweisungen, andernfalls werden die Schriften nicht geladen. Kein anderer Eintrag als ein @charset-Eintrag ist vor den @import-Zeilen zulässig.
Wenn Sie eine der Optionen für CSS-Einbettungscode verwenden, wird der Rest der Seite unter Umständen nicht angezeigt, bis das Web-Schriften-CSS vollständig geladen ist. Das Verhalten variiert zwischen Browsern, je nachdem, wie jeder einzelne externe CSS-Dateien verarbeitet.
Für asynchrones Laden von Schriftarten, das den Rest der Seite nicht blockiert, füge eine weitere JavaScript-Bibliothek neben dem CSS-Einbettungs-Code hinzu, um dein Schriftarten-Laden anzupassen.
JavaScript-Einbettungscode
Der JavaScript-Einbettungscode wird außerdem bei dynamischen Untergruppen zum Laden von Schriften benötigt. Diese werden zur Bereitstellung ostasiatischer Webschriften genutzt.
Der JavaScript-Einbettungscode zu einem dynamischen Projekt ist auf der Seite mit den Web-Projekten aufgeführt.
Der erweiterte Einbettungscode kann angepasst werden, indem ein Konfigurationsobjekt an die Typekit.load-Methode übergeben wird. Nähere Informationen hierzu finden Sie unter JavaScript-API.
JavaScript-API
Das JavaScript legt eine globale Variable Typekit mit einer öffentlichen Methode „load“ offen. Das Aufrufen von „Typekit.load“ ohne Argumente löst das Laden der Schrift aus.
Sie können auch ein Konfigurationsobjekt an „Typekit.load“ übergeben.
Die folgenden Callbacks können eingerichtet werden:
- loading ‒ Dieser Callback wird ausgelöst, wenn alle Schriften angefordert wurden.
- active ‒ Dieser Callback wird ausgelöst, wenn die Schriften dargestellt wurden.
- inactive ‒ Dieser Callback wird ausgelöst, wenn der Browser verknüpfte Schriften nicht unterstützt *oder* wenn keine der Schriften geladen werden konnte.
- fontloading ‒ Dieser Callback wird einmal für jede geladene Schrift ausgelöst. Der Callback wird mit dem Familiennamen als erstes Argument und der Schriftvariantenbeschreibung als zweites Argument aufgerufen.
- fontactive ‒ Dieser Callback wird einmal für jede dargestellte Schrift ausgelöst. Der Callback wird mit dem Familiennamen als erstes Argument und der Schriftvariantenbeschreibung als zweites Argument aufgerufen.
- fontinactive ‒ Dieser Callback wird ausgelöst, wenn die Schrift nicht geladen werden kann. Der Callback wird mit dem Familiennamen als erstes Argument und der Schriftvariantenbeschreibung als zweites Argument aufgerufen.
Ändern des Einbettungscodes einer Website
Wenn Ihre Website bereits Schriften über den alten JavaScript-Einbettungscode nutzt, können Sie zu einer neueren CSS-Version wechseln, indem Sie die <script>-Tags in Ihrem Code durch den HTML-<link>-Einbettungscode oder den CSS-@import-Einbettungscode ersetzen.
Verwenden von altem Einbettungscode auf einer Website
Auch wenn Adobe gelegentlich aufgrund von Verbesserungen bei der Schriften-Bereitstellung die Optionen für Einbettungscode ändert, funktionieren alle früheren Versionen der Einbettungscodes weiterhin.
Wenn Sie auf Ihrer Website einen alten Einbettungscode verwenden, müssen Sie diesen nicht ändern. Allerdings profitieren viele Websites bei einer Aktualisierung auf eine neuere Version von verbesserter Performance.
Frühere Versionen des Einbettungscodes enthalten eine JavaScript-Version, die die CSS-Datei asynchron lädt:
sowie eine protokollabhängige JavaScript-Version:
(Auch wenn Ihre Website den protokollabhängigen Einbettungscode nutzt, wird bei der Bereitstellung von Schriften für alle Anfragen HTTPS verwendet.)
Verwenden mehrerer Einbettungscodes auf einer Website
Wir raten aus mehreren Gründen davon ab, einer Webseite mehr als einen Einbettungscode hinzuzufügen:
- Jede Kopie des Einbettungscodes ist meist überflüssig.
- Jedes Projekt stellt gesonderte Anforderungen für Schriften, die die Anzahl der HTTP-Anforderungen erhöhen und das Laden weiter verlangsamen.
- Ein einzelnes Projekt kann nach dem ersten Laden auf allen Seiten Ihrer Website zwischengespeichert werden.
Ähnliche Themen
Stöbern in Adobe Fonts
Finde die passende Schrift für jedes Web- oder Print-Projekt.
