Als „Creative Cloud-Abonnent“ kann ich die Typekit-Fonts, heute: Adobe Fonts, kostenlos für meine Blogs benutzen. Obwohl man viele Websites findet, die die qualitativ hochwertigen Fonts nutzen, haben Blogger vielleicht rechtliche Bedenken (DSGVO) und zögern, die Fonts einzusetzen. Auf der anderen Seite sehe ich auch zahlreiche Blogs, die ihre Fonts nicht selbst hosten, sondern auch Google-Fonts weiterhin von den Google – Servern laden. Dass diese Tatsache in die Datenschutzerklärung (Nutzung von Google- oder Typekit-Fonts) gehört, sollte jeder bedenken.
Nehmen wir also an, du hättest die Möglichkeit, Typekit-Fonts zu nutzen. Dann stellt sich die Frage, wie die Einbindung der von dir selektierten und voreingestellten Fonts (Stichwort: font-display: swap) erfolgen sollte. Ich glaube, State-of-the-Art ist seit Längerem dieser Eintrag in eurer style.css:
@import url("https://use.typekit.net/xxxxxxx.css");
Meiner Erfahrung nach ist die Einbindung per JavaScript deutlich performanter, jedenfalls wenn ich den Pagespeed – Messungen trauen kann. Ich nutze hier das fantastische WordPress – Premium-Plugin perfmatters und lege den JavaScript-Code mit seiner Hilfe im Header meines 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 unumwunden zu, dass ich zwischen der Verwendung von System-Schriftarten, also ganz ohne Font-Einbindungen auszukommen, (Google-, Typekit oder anderen) hin und her schwanke. Ich weiß, dass viele Blogger solche Überlegungen für höchst überflüssig halten. Sie verwenden System-Schriftarten und ihnen reicht das völlig.
Die Verwendung des @Import-Einzeilers im Stylesheet hat nach meiner Beobachtung erhebliche Performancenachteile. Pagespeed weist bei meinem Blog einen Unterschied von mindestens 6-7 Punkten aus. Der Normalwert lautet: 98 (mobil) und 100 (Desktop), wenn ich die einzeiligen Aufruf in style.css verwende kommt ich auf 90-92 (mobil) und 100 (Desktop). Angemeckert wird dabei zum einen „First Contentful Paint“ und zum anderen „Largest Contentful Paint“.
Zur Verbesserung der Performance verwende ich außerdem DNS-Prefetch. Das kann zum Beispiel via WP-Rocket (Premium Cache Plugin) oder auch via perfmatters geschehen. Die Einträge bei Typekit sehen so aus:
//use.typekit.com
//p.typekit.net
Daneben nutze ich die Möglichkeit, evtl. verwendete selbst gehostete Fonts vorladen zu lassen. Auch dies geht mit WP-Rocket oder perfmatters. Es macht einen Unterschied, ob ich das DNS-Prefetch und das Vorladen der Fonts nutze. In den weiter unten verlinkten Performancetipps werden die Details dazu gut erläutert.
Es ist und bleibt nun mal die Entscheidung zwischen Optik und Performance. Das Laden von Fonts von anderen Servern bringt manchmal erhebliche Geschwindigkeitsvorteile. Und meine Liebe zu schönen Fonts heißt schließlich nicht, dass sich „nur“ mit Systemschriftarten bei Verwendung der typografischen Möglichkeiten (Variationen) nicht auch wunderbare Ergebnisse erzielen ließen.
Web-Schriftarten machen durchschnittlich 6 % des Gesamtgewichts einer Webseite auf Mobilgeräten aus. Sie wirken sich auf Ihre Ladezeit und die Art und Weise aus, wie Ihre Seite gerendert wird. Viele Websites verwenden mehr Schriftarten, als sie benötigen. Wählen Sie ein paar verschiedene Gewichtsvarianten, normal, fett, etc. Dadurch wird die Größe niedrig bleiben. Außerdem wird WOFF 2 von über 95% aller Browser unterstützt
WordPress-Leistungs-Checkliste (alles, was Sie brauchen)
Wenn Sie einen Systemschriftstapel verwenden, müssen Sie keine Schriftarten auf die Seite laden! Das ist ziemlich riesig! Es eliminiert auch alle FOUT (Flash von unstyled Text) oder FOIT (Flash von unsichtbarem Text) Hässlichkeit. Unsere Website verwendet Systemschriftarten, und ich wette, Sie haben es nicht einmal bemerkt. Das ist richtig; Diese Site lädt keine einzelne Schriftart.
How to speed up WordPress (optimizations for Core Web Vitals in 2021)
