Der Einbettungscode legt fest, wie Webschriftarten 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 Schriftarten (kein JavaScript). Sie können verwendet werden, um WebseitenHTML-E-Mails oder Newslettern, Google AMP und vielen anderen Arten von Projekten, die Webschriftarten unterstützen, Schriftarten hinzuzufügen. JavaScript wird außerdem für dynamische Untergruppen beim Laden von Schriftarten verwendet. Diese werden zur Bereitstellung ostasiatischer Webschriftarten 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 Schriftarten-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.

Standard-CSS-Einbettungscode

@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“.

@import-CSS-Einbettungscode

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:

Hinzufügen von @import zu Ihrem CSS

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 Schriftarten 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 Webschriftarten-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 Schriftarten, das den Rest der Seite nicht blockiert, können Sie eine andere JavaScript-Bibliothek neben dem CSS-Integrationscode einbeziehen, um das Laden der Schriftarten anzupassen.

JavaScript-Einbettungscode

Der JavaScript-Einbettungscode wird außerdem bei dynamischen Untergruppen zum Laden von Schriftarten benötigt. Diese werden zur Bereitstellung ostasiatischer Webschriftarten 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 Schriftart 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 Schriftarten angefordert wurden.
  • active ‒ Dieser Callback wird ausgelöst, wenn die Schriftarten dargestellt wurden.
  • inactive ‒ Dieser Callback wird ausgelöst, wenn der Browser verknüpfte Schriftarten nicht unterstützt *oder* wenn keine der Schriftarten geladen werden konnte.
  • fontloading ‒ Dieser Callback wird einmal für jede geladene Schriftart 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 Schriftart 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 Schriftart 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 Schriftarten ü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 Schriftarten-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 Schriftarten 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.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie