Benutzerhandbuch Abbrechen

Einbettungscode

Suchen

Zuletzt aktualisiert am 1. Mai 2021

Der Einbettungscode legt fest, wie Webschriften 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 Webschriften unterstützen, Schriften hinzuzufügen. JavaScript wird außerdem für dynamische Untergruppen beim Laden von Schriften verwendet. Dies wird zur Bereitstellung ostasiatischer Webschriften benötigt.

Der Einbettungscode zu all Ihren Projekten ist auf der Seite mit den Webprojekten 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.

<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">

Um den Standard-Einbettungscode für Ihr Projekt zu finden, besuchen Sie die Seite mit den Webprojekten. Fügen Sie diesen Einbettungscode dem <head>-Tag auf Ihrer Website hinzu.

@import-Einbettungscode

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 Webprojekten und klicken Sie dann auf die Option „@import-Link“.

Fügen Sie ihn zwischen den Stil-Tags im <head> Ihrer Website hinzu:

<style>
  @import url("https://use.typekit.net/xxxxxxx.css");
</style>

Oder platzieren Sie ihn an den Anfang Ihrer CSS-Datei:

Hinweis:

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 Webschriften-CSS vollständig geladen ist. Das Verhalten hängt vom verwendeten Browser und dessen Umgang mit externen CSS-Dateien ab.

Für ein asynchrones Laden von Schriften, das den Rest der Seite nicht blockiert, können Sie eine andere JavaScript-Bibliothek neben dem CSS-Integrationscode einbeziehen, um das Laden der Schriften 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.

<script>
  (function(d) {
    var config = {
      kitId: 'xxxxxxx',
      scriptTimeout: 3000,
      async: true
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>

Der JavaScript-Einbettungscode zu einem dynamischen Projekt ist auf der Seite mit den Webprojekten aufgeführt.

JavaScript-Einbettungscode für dynamische Projekte

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.

Typekit.load()

Sie können auch ein Konfigurationsobjekt an „Typekit.load“ übergeben.

Typekit.load({
      // configuration…
 });

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:

<script src="https://use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

sowie eine protokollabhängige JavaScript-Version:

<script src="//use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

(Auch wenn Ihre Website den protokollabhängigen Einbettungscode nutzt, wird bei der Bereitstellung von Schriften für alle Anfragen HTTPS verwendet.)

Verwenden mehrerer Baukästen 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.

Mehr

Warum stammen meine Webschriften von use.typekit.net?

Adobe

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?