Lange war WordPress auf dem Weg zu einer echten Web Fonts API – mit dem Release von Gutenberg 12.8 am 16. März 2022 ist sie da. Lerne, wie du die WordPress Web Fonts API verwendest und was sich dank der Web Fonts API endlich ändert.

Unter anderem fügst du mit der WordPress Web Fonts API dynamisch benutzerdefinierte Schriftarten zu deinen WordPress Themes hinzu und gewinnst so mehr Kontrolle über den Text auf deiner WordPress Website. 

Was ist die neue WordPress Web Fonts API? 

Im September 2021 wurde ein Vorschlag des WordPress Entwicklers Ari Stathopoulos zu einer Web Fonts API in der Community diskutiert. Mit Die WordPress Web Fonts API ist ein großer Durchbruch für dich als Webentwickler:in oder Designer:in. Die WordPress Web Fonts API ermöglicht es dir, Schriftarten in deine WordPress Websites einzubinden, ohne dich um die font-face Regel oder die Cross Domain Policy kümmern zu müssen.  

Die WordPress Web Fonts API wurde in der neuen Gutenberg Version 12.8 integriert und soll mit WordPress 6.0 in den Core kommen. „Dass es so lange gedauert hat, bis wir an diesem Punkt angekommen sind, ist ein Beweis dafür, wie komplex Web Fonts sein können“ – wie Héctor Prieto im offiziellen Blogbeitrag zu Gutenberg 12.8 auf WordPress.org erklärt.

Jetzt, wo es dieses Framework gibt, können weitere Tools und Optimierungen darauf aufgebaut werden, um sicherzustellen, dass WordPress den Endnutzer:innen die bestmögliche Erfahrung (und den bestmöglichen Datenschutz) bietet.

Warum ist eine Core API notwendig? 

Standards ermöglichen eine routinemäßige Implementierung von Schriftarten. Es handelt sich um einen Standard, so dass jede Entwicklerin und jeder Entwickler sich ein paar Zeilen Code ansehen und verstehen kann, was der Code tut. Durch die Implementierung einer API wird eine stabile Basis für zukünftige Entwicklungen ermöglicht.  

Das Gutenberg Projekt

Der Gutenberg Editor wurde entwickelt. Zusammen mit der Möglichkeit, globale Stile zu verwenden, mussten Entwickler:innen in Gutenberg auch festlegen können, welche Schriftarten auf der Seite verwendet werden sollen. Dank der Tatsache, dass es sich um eine API handelt, können auch andere Anwendungen oder Teile derselben Anwendung die Daten von der WordPress Web Fonts API abrufen.

Ein Anwendungsszenario: Du hast eine Entwicklerin oder einen Entwickler damit beauftragt, ein individuelles Cookie Banner zu erstellen. Auf deiner WordPress Website verwendest du die WordPress Web Fonts API, um anzugeben, welche Schriftarten verwendet werden sollen. Die Entwicklerin oder der Entwickler kann die gleichen Web Fonts verwenden, die auch auf der anderen Webseite verwendet werden.

Du kannst dieselbe API verwenden, um die Schriftarten der Website zu verwalten. Du brauchst die Einstellungen nicht an mehreren Stellen zu verwalten. Es ist erwähnenswert, dass die erste Version nur eine Grundlage ist, auf der das WordPress Team aufbauen wird.

Der Weg zu einer Web Fonts API in WordPress war für Entwickler:innen eine Achterbahn der Gefühle. Nachdem sie aus WordPress 5.9 gestrichen worden war, wurde sie in das Gutenberg Projekt verschoben, wo sie zusammen mit verwandten Funktionen, die auf sie angewiesen waren, entwickelt werden konnte.

Das bedeutet, dass du deine Schriftarten von der gleichen Stelle aus verwenden und einstellen kannst und die Änderungen mit allen Stellen synchronisiert werden, an denen du die WordPress Web Fonts API verwendest. Es ist erwähnenswert, dass die erste Version nur eine Grundlage ist, auf der das WordPress Team weiter aufbauen wird. 

In diesem Artikel zeigen wir dir, wie du die WordPress Web Fonts API nutzen kannst, von der Installation bis zum Hinzufügen von Schriftarten zur API. Fangen wir an.  

Was macht die WordPress Web Fonts API? 

Diese API ist der erste Schritt, um das Laden von Schriften auf eine leistungsfähige, datenschutzfreundliche und zukunftssichere Art und Weise zu ermöglichen – etwas, das ohne ein solches Framework nur sehr schwer möglich ist.

Mit der WordPress Web Fonts API können Theme Entwickler festlegen, welche Schriftfamilien zusammen mit den zugehörigen Dateien in WordPress verwendet werden sollen. WordPress lädt die Schriftarten automatisch mit dem richtigen CSS im Editor und im Frontend. In der ersten Version der WordPress Web Fonts API werden Skripte und Stile auf Warteschlangen gesetzt. Der Grund dafür ist die Notwendigkeit einer einheitlichen Lösung.

Die Web Font API Funktion fungiert als Wrapper für die Stylesheet API. Denn um eine Webschrift in die Warteschlange zu stellen, muss die Schriftdatei selbst in die Warteschlange gestellt werden, indem das Stylesheet in die Warteschlange gestellt wird (oder ein Inline-Style hinzugefügt wird). 

Anfänglich kannst du nur lokale Schriftarten verwenden. In Zukunft wird das WordPress Team sicherlich die Unterstützung für weitere Schriftartenanbieter hinzufügen. 

Anstatt sie zu entfernen, könnten wir sie vielleicht richtig implementieren und lokal gehostete Web Fonts erzwingen, um Leistung und Datenschutz zu verbessern? Auf diese Weise würden wir mit gutem Beispiel vorangehen und eine deutliche Verbesserung der Leistung und des Datenschutzes im WordPress Ökosystem sehen, da Themes und Plugins, die derzeit Google-Schriften, Adobe-Schriften usw. verwenden, die API übernehmen werden. 

Zitat von GitHub

Es kann zu Leistungsproblemen führen, wenn die Downloads von Themes größer werden, wenn nur lokale Schriftarten unterstützt werden. Für viele Themes sollte dies jedoch kein Problem sein – ein, zwei oder drei Schriftartenpakete dürften für die meisten Themes ausreichen. Wenn aber globale Stilvariationen populär werden, könnten wir Themes sehen, die viele Schriftarten anbieten, um mehrere vordefinierte Designs abzudecken.  

Wie du die WordPress Web Fonts API benutzt 

Werfen wir nun einen Blick darauf, wie die neue WordPress Web Fonts API in der Praxis genutzt werden kann. 

Es gibt zwei Methoden, um Web Fonts bei WordPress zu registrieren: über deine „theme.json“-Datei, was seit WordPress 5.8 Standard ist, oder über die @font-face-Methode. Die Schlüssel und Werte der theme.json entsprechen größtenteils der CSS @font-face-Regel. Wenn du sie nicht kennst, solltest du dein Wissen auffrischen. Die @font-face-Regel ist ein CSS-Stil, mit dem du die Schriftart festlegen kannst, die du auf deiner Website verwenden möchtest.

Du kannst entweder eine Schriftart verwenden, die bereits auf dem Computer des Nutzers installiert ist, oder du kannst eine Schriftart von einem entfernten Server laden. Die Datei theme.json enthält die Liste der Schriftarten, die du auf deiner Website verwenden möchtest. Sie enthält den Namen der Schriftart, die URL der Schriftartdatei sowie das Gewicht und den Stil der Schriftart.  

Wir werden uns nun ansehen, wie du die Schriftarten mithilfe der theme.json-Datei ändern kannst. Dazu musst du dich über SFTP mit deiner WordPress Website verbinden. So greifst du auf die Dateien deiner Website zu. Verwende einen FTP-Client deiner Wahl. (Beachte, dass Raidboxes nur SFTP und kein unverschlüsseltes FTP unterstützt). Ich verwende Termius.  

Sobald du dich mit deinem Server verbunden hast und dich im Home-Ordner befindest, siehst du einen Ordner namens „disk“. Klicke ihn an. 

Im „disk“-Ordner sind zwei Ordner zu sehen (das kann in manchen Fällen anders aussehen), aber du solltest auf den Ordner „WordPress“ klicken. Unter dem Ordner „WordPress“ wird die übliche WordPress Bibliothek mit Dateien angezeigt. Klicke auf den Ordner „wp-content“ und unter diesem Ordner auf den Ordner „themes“.

Wir befinden uns nun in dem Ordner, in dem alle installierten WordPress Themes abgelegt sind. Ich klicke zu Demonstrationszwecken auf twentytwentytwo. Auf dem Bild siehst du die Datei, die du auf deinen Computer herunterladen musst, um die Datei zu bearbeiten.  

Nachdem du die Datei „theme.json“ mit dem normalen Editor oder deiner bevorzugten IDE geöffnet hast, fügst du unter settings.typography.fontfamily die Webschriftarten als Teil einer speziellen Schriftfamiliendefinition hinzu.  

}, 

„typography“: { 

„customFontSize“: true, 

„dropCap“: false, 

„fontFamilies“: [ 

{ 

„fontFamily“: „Outfit“, „sans-serif“, 

„name“: „Outfit“, 

„slug“: „primary“ 

}, 

{ 

„fontFamily“: „monospace“, 

„name“: „Monospace“, 

„slug“: „monospace“ 

} 

  

Nachdem du die Datei „theme.json“ in einem beliebigen Texteditor geöffnet hast. 

Du kannst den Tag „typography“ finden, wenn du den Code durchschaust. Dann siehst du das Tag „fontFamilies“, unter dem du die Schriftarten einträgst, die du zu deiner WordPress-Website hinzufügen möchtest. Auf dem Bild sind rote Markierungen zu sehen. Wie auf dem Bild oben.  

Je nachdem, welches Theme du verwendest, kann der Code anders aussehen. In einem anderen Beispiel verwende ich das Standard-Theme twentytwentytwo ohne Änderungen. Wie du unter der ersten „fontfamily“ sehen kannst, siehst du den Code für System Font Stack (Die System- und Standardschriftarten werden auf Computern und Mobiltelefonen verwendet). Lies hier mehr über Schriftarten.  

Beispiele für die Verwendung 

Mit der WordPress Web Fonts API für die neueste Version von WordPress können Entwickler:innen angeben, welche Schriftarten im Theme Editor verwendet werden sollen. Stell dir vor, eine Entwicklerin oder ein Entwickler möchte eine Schriftkombination nach den Wünschen des Kunden verwenden.

Dann ist es für den Redakteur sehr einfach, einen Artikel zu veröffentlichen. Der Redakteur muss nicht über Schriftkombinationen nachdenken, sie sind bereits voreingestellt. Dieses Anwendungsbeispiel zeigt, was die Idee hinter der Font API ist. 

Fazit zur WordPress Web Fonts API

Die WordPress Web Fonts API ist für dich als Webentwickler:in oder Designer:in ein entscheidender Schritt nach vorn. Indem sie Theme Entwickler:innen ermöglicht, Schriftfamilien und die dazugehörigen Dateien zu definieren, kümmert sich WordPress darum, die Schriften sowohl im Editor als auch im Frontend zu laden. Das macht Entwicklung und Design viel einfacher und effizienter. 

In diesem Artikel habe ich beschrieben, wie die WordPress Web Fonts API funktioniert. Hast du schon versucht, sie zu nutzen? Ich würde gerne deine Meinung dazu hören.