Schriftartenverwaltung in WordPress Block Themes

Schriftarten sind ein bestimmendes Merkmal des Designs jeder Website. Dazu gehören auch WordPress-Themes, bei denen es üblich ist, dass Theme-Entwickler Dienste wie Google Fonts in die WordPress Customizer-Einstellungen für ein „klassisches“ PHP-basiertes Theme integrieren. Bei WordPress Block Themes ist das bisher nicht ganz der Fall. Während die Integration von Google Fonts in klassische Themes gut dokumentiert ist, gibt es derzeit im WordPress Theme Handbook nichts Spezifisches für Block Themes.

Darum geht es in diesem Artikel. Block Themes können Google Fonts zwar verwenden, aber der Prozess der Registrierung ist ganz anders als das, was Sie vielleicht bisher bei klassischen Themes getan haben.

Was wir bereits wissen

Wie bereits erwähnt, gibt es wenig Anhaltspunkte für den Einstieg. Das Twenty Twenty-Two Theme ist das erste standardmäßige WordPress-Theme auf Blockbasis, und es zeigt, wie wir heruntergeladene Schriftartdateien als Assets im Theme verwenden können. Aber es ist ziemlich unhandlich, da es ein paar Schritte erfordert: (1) Registrieren der Dateien in der functions.php-Datei und (2) Definieren der gebündelten Schriftarten in der theme.json-Datei.

Seit der Veröffentlichung von Twenty Twenty-Two ist der Prozess jedoch einfacher geworden. Gebündelte Schriftarten können nun ohne Registrierung definiert werden, wie im Twenty Twenty-Three Theme gezeigt. Der Prozess erfordert jedoch immer noch, dass wir Schriftartdateien manuell herunterladen und in die Themes bündeln. Das ist ein Hindernis, das den Zweck von einfachen, Drop-in, gehosteten Schriftarten, die über ein schnelles CDN bereitgestellt werden, zunichte macht.

Was ist neu

Falls Sie es noch nicht wussten, das Gutenberg-Projekt ist ein experimentelles Plugin, bei dem Funktionen für den WordPress Block- und Site-Editor frühzeitig genutzt und getestet werden können. In einem aktuellen Artikel von Theme Shaper bespricht der leitende Architekt des Gutenberg-Projekts, Matias Benedetto, wie Google Fonts – oder andere heruntergeladene Schriftarten – mithilfe des Plugins Create Block Theme zu Block Themes hinzugefügt werden können.

Dieses kurze Video auf Learn WordPress bietet einen guten Überblick über das Create Block Theme Plugin und seine Funktionsweise. Aber im Grunde genommen tut es, was es verspricht: Es erstellt Block Themes. Dies geschieht durch die Bereitstellung von Steuerelementen in der WordPress-Benutzeroberfläche, die es Ihnen ermöglichen, ein gesamtes Theme, ein Child-Theme oder eine Theme-Stilvariante zu erstellen, ohne Code schreiben oder jemals auf Template-Dateien zugreifen zu müssen.

Ich habe es ausprobiert! Und da Create Block Theme vom WordPress.org-Team verfasst und gepflegt wird, würde ich sagen, dass es die beste Möglichkeit ist, Google Fonts in ein Theme zu integrieren. Allerdings ist es definitiv erwähnenswert, dass sich das Plugin in aktiver Entwicklung befindet. Das bedeutet, dass sich Dinge ziemlich schnell ändern könnten.

Bevor ich darauf eingehe, wie alles funktioniert, wollen wir uns kurz den „traditionellen“ Prozess des Hinzufügens von Google Fonts zu klassischen WordPress-Themes in Erinnerung rufen.

Wie es früher gemacht wurde

Dieser Artikel von ThemeShaper aus dem Jahr 2014 liefert ein hervorragendes Beispiel dafür, wie wir dies früher in klassischen PHP-Themes gemacht haben, ebenso wie dieser neuere Artikel von Cloudways von Ibad Ur Rehman.

Zur Auffrischung des Gedächtnisses hier ein Beispiel aus dem Standard-Theme Twenty Seventeen, das zeigt, wie Google Fonts in der functions.php-Datei in die Warteschlange gestellt werden.

function twentyseventeen_fonts_url() {
  $fonts_url = '';
  /**
   * Translators: If there are characters in your language that are not
   * supported by Libre Franklin, translate this to 'off'. Do not translate
   * into your own language.
   */
  $libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' );
  if ( 'off' !== $libre_franklin ) {
    $font_families = array();
    $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i';
    $query_args = array(
      'family' => urlencode( implode( '|', $font_families ) ),
      'subset' => urlencode( 'latin,latin-ext' ),
    );
    $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
  }
  return esc_url_raw( $fonts_url );
}

Dann wird Google Fonts wie folgt mit dem Theme vorab verbunden

function twentyseventeen_resource_hints( $urls, $relation_type ) {
  if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
    $urls[] = array(
      'href' => 'https://fonts.gstatic.com',
      'crossorigin',
    );
  }
  return $urls;
}
add_filter( 'wp_resource_hints', 'twentyseventeen_resource_hints', 10, 2 );

Was ist falsch an der traditionellen Methode

Großartig, oder? Es gibt jedoch einen Haken. Im Januar 2022 verhängte ein deutsches Landesgericht eine Geldstrafe gegen einen Website-Betreiber wegen Verstoßes gegen die europäischen DSGVO-Anforderungen. Das Problem? Das Einbinden von Google Fonts auf der Website enthüllte die IP-Adresse eines Besuchers und gefährdete die Privatsphäre der Nutzer. CSS-Tricks hat dies vor einiger Zeit behandelt.

Das Plugin Create Block Theme erfüllt die DSGVO-Datenschutzanforderungen, da es die Google Fonts API nutzt, um ausschließlich als Proxy für den lokalen Anbieter zu dienen. Die Schriftarten werden dem Benutzer auf derselben Website und nicht auf den Servern von Google bereitgestellt, was die Privatsphäre schützt. WP Tavern erörtert das Urteil des deutschen Gerichts und enthält Links zu Anleitungen für das Self-Hosting von Google Fonts.

Wie man Google Fonts mit Block Themes verwendet

Das bringt uns zur heutigen „modernen“ Art, Google Fonts mit WordPress Block Themes zu verwenden. Richten wir zuerst eine lokale Testseite ein. Ich benutze die Local App von Flywheel für die lokale Entwicklung. Sie können diese oder jede andere bevorzugte App verwenden und dann das Plugin Theme Test Data vom WordPress Themes Team verwenden, um mit Dummy-Inhalten zu arbeiten. Und natürlich benötigen Sie auch das Plugin Create Block Theme.

Haben Sie diese Plugins installiert und aktiviert? Wenn ja, navigieren Sie im WordPress Admin-Menü zu Darstellung → Theme-Schriftarten verwalten.

Der Bildschirm „Theme-Schriftarten verwalten“ zeigt eine Liste aller Schriftarten an, die bereits in der theme.json-Datei des Themes definiert sind. Oben auf dem Bildschirm gibt es außerdem zwei Optionen

• Google Fonts hinzufügen. Diese Option fügt Google Fonts direkt aus der Google Fonts API zum Theme hinzu.
• Lokale Schriftarten hinzufügen. Diese Option fügt heruntergeladene Schriftartdateien zum Theme hinzu.

Ich verwende ein komplett leeres Theme von WordPress namens Emptytheme. Sie können gerne Ihr eigenes Theme verwenden, aber ich möchte darauf hinweisen, dass ich Emptytheme in „EMPTY-BLANK“ umbenannt und modifiziert habe, sodass es überhaupt keine vordefinierten Schriftarten und Stile gibt.

Ich dachte, ich würde einen Screenshot meiner Theme-Dateistruktur und der theme.json-Datei teilen, um zu zeigen, dass dort buchstäblich keine Stile oder Konfigurationen vorhanden sind.

Klicken wir auf die Schaltfläche „Google Fonts hinzufügen“. Dies führt uns zu einer neuen Seite mit Optionen zur Auswahl jeder verfügbaren Schriftart aus der aktuellen Google Fonts API.

Für diese Demo habe ich im Menü der Optionen Inter ausgewählt und auf dem Vorschaufenster die Schriftschnitte 300, Regular und 900 ausgewählt.

Nachdem ich meine Auswahl gespeichert habe, werden die von mir ausgewählten Inter-Schriftschnitte automatisch heruntergeladen und im Ordner assets/fonts des Themes gespeichert.

Beachten Sie auch, wie diese Auswahlen automatisch in die theme.json-Datei in diesem Screenshot geschrieben wurden. Das Create Block Theme Plugin fügt sogar den Pfad zu den Schriftartdateien hinzu.

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "840px",
      "wideSize": "1100px"
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter",
          "slug": "inter",
          "fontFace": [
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "300",
              "src": [
                "file:./assets/fonts/inter_300.ttf"
              ]
            },
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "900",
              "src": [
                "file:./assets/fonts/inter_900.ttf"
              ]
            },
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "400",
              "src": [
                "file:./assets/fonts/inter_regular.ttf"
              ]
            }
          ]
        }
      ]
    }
  }
}

Wenn wir zum Hauptbildschirm von Create Block Theme gehen und erneut auf die Schaltfläche Theme-Schriftarten verwalten klicken, sehen wir Inter’s Varianten 300, 400 (Regular) und 900 im Vorschaufenster angezeigt.

Eine Demo-Text-Vorschaufenster oben ermöglicht es Ihnen sogar, die ausgewählten Schriftarten innerhalb des Satzes, der Überschrift und des Absatzes mit dem Schieberegler für die Schriftgröße zu sehen. Sie können diese neue Funktion in Aktion sehen in diesem GitHub-Video.

Die ausgewählten Schriftart(en) sind auch im Site Editor unter Globale Stile (Darstellung → Editor) verfügbar, insbesondere im Design-Bereich.

Navigieren Sie von hier zu Vorlagen → Index und klicken Sie auf die blaue Schaltfläche Bearbeiten, um die index.html-Vorlage zu bearbeiten. Wir möchten die Einstellungen für Globale Stile öffnen, die durch ein Kontrastsymbol oben rechts auf dem Bildschirm dargestellt werden. Wenn wir auf die Text-Einstellungen klicken und im Abschnitt Typografie das Menü Schriftart öffnen… sehen wir Inter!

Dasselbe, aber mit lokalen Schriftarten

Wir können uns auch ansehen, wie man lokale Schriftarten zu einem Theme hinzufügt, da das Create Block Theme Plugin diese Option bietet. Der Vorteil ist, dass Sie jede gewünschte Schriftartendatei von jedem beliebigen Schriftartendienst verwenden können.

Ohne das Plugin müssten wir unsere Schriftartdateien holen, sie irgendwo im Theme-Ordner ablegen und dann auf die traditionelle PHP-Route zurückgreifen, um sie in der functions.php-Datei in die Warteschlange zu stellen. Aber wir können WordPress die Bürde abnehmen, indem wir die Schriftartendatei auf dem Bildschirm Lokale Schriftarten hinzufügen über die Create Block Theme-Oberfläche hochladen. Sobald eine Datei zum Hochladen ausgewählt wurde, werden die Schriftartendefinitionsfelder automatisch ausgefüllt.

Obwohl wir jede .ttf-, .woff- oder .woff2-Datei verwenden können, habe ich für diese Übung einfach Open Sans-Schriftartdateien von Google Fonts heruntergeladen. Ich habe zwei Gewichtsvarianten erwischt: Regular und 800.

Dieselbe automatische Dateiverwaltung und Aktualisierung der theme.json, die wir bei der Option Google Fonts gesehen haben, geschieht erneut, wenn wir die Schriftartdateien hochladen (was einzeln geschieht). Schauen Sie sich an, wo die Schriftarten in meinem Theme-Ordner gelandet sind und wie sie zur theme.json hinzugefügt werden.

Schriftarten entfernen

Das Plugin ermöglicht es uns auch, Schriftartdateien aus einem Block Theme über die WordPress-Verwaltung zu entfernen. Löschen wir eine der Open Sans-Varianten, die wir im letzten Abschnitt installiert haben, um zu sehen, wie das funktioniert.

Das Klicken auf die Links Entfernen löst eine Warnung aus, die Sie auffordert, die Löschung zu bestätigen. Wir klicken auf OK, um fortzufahren.

Öffnen wir unseren Theme-Ordner und überprüfen die theme.json-Datei. Tatsächlich hat die von uns im Plugin-Bildschirm gelöschte Open Sans 800-Datei die Schriftartdatei aus dem Theme-Ordner entfernt, und der Verweis darauf ist in theme.json lange verschwunden.

Es wird laufend daran gearbeitet

Es gibt Gespräche darüber, diese Funktion „Font Manager“ in den WordPress Core aufzunehmen, anstatt ein separates Plugin zu benötigen.

Eine anfängliche Iteration der Funktion ist im Repository verfügbar und verwendet genau den gleichen Ansatz wie wir in diesem Artikel. Sie sollte auch DSGVO-konform sein. Die Funktion ist für die Veröffentlichung mit dem Release von WordPress 6.3 später in diesem Jahr geplant.

Zusammenfassung

Das Create Block Theme Plugin verbessert die Benutzererfahrung bei der Handhabung von Schriftarten in WordPress Block Themes erheblich. Das Plugin ermöglicht es uns, Schriftarten hinzuzufügen oder zu löschen, während die DSGVO-Anforderungen eingehalten werden.

Wir haben gesehen, wie die Auswahl einer Google-Schriftart oder das Hochladen einer lokalen Schriftartendatei die Schriftart automatisch im Theme-Ordner platziert und in der theme.json-Datei registriert. Wir haben auch gesehen, wie die Schriftart als verfügbare Option in den Globalen Stileinstellungen im Site Editor verfügbar ist. Und wenn wir eine Schriftart entfernen müssen? Das Plugin kümmert sich auch darum – ohne dass wir Theme-Dateien oder Code anfassen müssen.

Vielen Dank fürs Lesen! Wenn Sie Kommentare oder Vorschläge haben, teilen Sie diese bitte in den Kommentaren mit. Ich würde gerne wissen, was Sie von dieser möglichen Richtung für die Schriftartenverwaltung in WordPress halten.

Zusätzliche Ressourcen

Ich habe mich für die Erstellung dieses Artikels auf viel Recherche gestützt und dachte, ich teile die Artikel und Ressourcen, die ich verwendet habe, um Ihnen zusätzlichen Kontext zu bieten.

WordPress Schriftartenverwaltung

• Wie man typografische Schriftarten zu WordPress Block Themes hinzufügt (Theme Shaper)
• Wie man Google Fonts zu WordPress Themes hinzufügt (Theme Shaper)
• Wie benutzt man Google Fonts mit WordPress? (Cloudways)
• Verwalten Sie Ihre Block-Theme-Schriftarten mit Create Block Theme (Learn WordPress)
• Verwendung von Create Block Theme (WordPress.tv)

GitHub Issues

• Globale Stile/Typografie: Verwaltung von Schriftarten-Sets (#45271)
• Schriftarten-Manager (#46332)

Europäische DSGVO-Anforderungen

• Deutsches Gericht verurteilt Website-Betreiber wegen Verstoßes gegen die DSGVO durch Nutzung von Google-gehosteten Schriftarten (WPTavern)
• DSGVO-Konformität bei der Nutzung von Google Fonts (Make WordPress Themes)
• Deutsches Gericht verhängt 100 € Schadenersatz gegen Website-Betreiber wegen Nutzung von Google Fonts (ePrivacy Blog)
• Bunny Fonts (CSS-Tricks)