Typekit-​Fonts besser per Java-​Script einbinden

Als „Creative Cloud-​Abonnent” kann ich die Typekit-​Fonts, heu­te: Adobe Fonts, kos­ten­los für mei­ne Blogs benut­zen. Obwohl man vie­le Websites fin­det, die die qua­li­ta­tiv hoch­wer­ti­gen Fonts nut­zen, haben Blogger viel­leicht recht­li­che Bedenken (DSGVO) und zögern, die Fonts ein­zu­set­zen. Auf der ande­ren Seite sehe ich auch zahl­rei­che Blogs, die ihre Fonts nicht selbst hos­ten, son­dern auch Google-​Fonts wei­ter­hin von den Google – Servern laden. Dass die­se Tatsache in die Datenschutzerklärung (Nutzung von Google- oder Typekit-​Fonts) gehört, soll­te jeder bedenken. 

Nehmen wir also an, du hät­test die Möglichkeit, Typekit-​Fonts zu nut­zen. Dann stellt sich die Frage, wie die Einbindung der von dir selek­tier­ten und vor­ein­ge­stell­ten Fonts (Stichwort: font-display: swap) erfol­gen soll­te. Ich glau­be, State-​of-​the-​Art ist seit Längerem die­ser Eintrag in eurer style.css:

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

Meiner Erfahrung nach ist die Einbindung per JavaScript deut­lich per­for­man­ter, jeden­falls wenn ich den Pagespeed – Messungen trau­en kann. Ich nut­ze hier das fan­tas­ti­sche WordPress – Premium-​Plugin perf­mat­ters und lege den JavaScript-​Code mit sei­ner Hilfe im Header mei­nes Blogs ab:

<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>

Ich gebe unum­wun­den zu, dass ich zwi­schen der Verwendung von System-​Schriftarten, also ganz ohne Font-​Einbindungen aus­zu­kom­men, (Google‑, Typekit oder ande­ren) hin und her schwan­ke. Ich weiß, dass vie­le Blogger sol­che Überlegungen für höchst über­flüs­sig hal­ten. Sie ver­wen­den System-​Schriftarten und ihnen reicht das völlig. 

Die Verwendung des @Import-Einzeilers im Stylesheet hat nach mei­ner Beobachtung erheb­li­che Performancenachteile. Pagespeed weist bei mei­nem Blog einen Unterschied von min­des­tens 6–7 Punkten aus. Der Normalwert lau­tet: 98 (mobil) und 100 (Desktop), wenn ich die ein­zei­li­gen Aufruf in style.css ver­wen­de kommt ich auf 90–92 (mobil) und 100 (Desktop). Angemeckert wird dabei zum einen „First Contentful Paint” und zum ande­ren „Largest Contentful Paint”. 

Zur Verbesserung der Performance ver­wen­de ich außer­dem DNS-​Prefetch. Das kann zum Beispiel via WP-​Rocket (Premium Cache Plugin) oder auch via perf­mat­ters gesche­hen. Die Einträge bei Typekit sehen so aus:

//use.typekit.com
//p.typekit.net

Daneben nut­ze ich die Möglichkeit, evtl. ver­wen­de­te selbst gehos­te­te Fonts vor­la­den zu las­sen. Auch dies geht mit WP-​Rocket oder perf­mat­ters. Es macht einen Unterschied, ob ich das DNS-​Prefetch und das Vorladen der Fonts nut­ze. In den wei­ter unten ver­link­ten Performancetipps wer­den die Details dazu gut erläutert.

Es ist und bleibt nun mal die Entscheidung zwi­schen Optik und Performance. Das Laden von Fonts von ande­ren Servern bringt manch­mal erheb­li­che Geschwindigkeitsvorteile. Und mei­ne Liebe zu schö­nen Fonts heißt schließ­lich nicht, dass sich „nur” mit Systemschriftarten bei Verwendung der typo­gra­fi­schen Möglichkeiten (Variationen) nicht auch wun­der­ba­re Ergebnisse erzie­len ließen.

Web-​Schriftarten machen durch­schnitt­lich 6 % des Gesamtgewichts einer Webseite auf Mobilgeräten aus. Sie wir­ken sich auf Ihre Ladezeit und die Art und Weise aus, wie Ihre Seite ger­en­dert wird. Viele Websites ver­wen­den mehr Schriftarten, als sie benö­ti­gen. Wählen Sie ein paar ver­schie­de­ne Gewichtsvarianten, nor­mal, fett, etc. Dadurch wird die Größe nied­rig blei­ben. Außerdem wird WOFF 2 von über 95% aller Browser unterstützt

WordPress-​Leistungs-​Checkliste (alles, was Sie brauchen)

‎Wenn Sie einen Systemschriftstapel ver­wen­den, müs­sen Sie kei­ne Schriftarten auf die Seite laden! Das ist ziem­lich rie­sig! Es eli­mi­niert auch alle FOUT (Flash von unsty­led Text) oder FOIT (Flash von unsicht­ba­rem Text) Hässlichkeit. Unsere Website ver­wen­det Systemschriftarten, und ich wet­te, Sie haben es nicht ein­mal bemerkt. Das ist rich­tig; ‎‎Diese Site lädt kei­ne ein­zel­ne Schriftart‎‎.‎

How to speed up WordPress (opti­miza­ti­ons for Core Web Vitals in 2021)