Wie man Google Fonts aus GeneratePress entfernt und stattdessen lokal hinzufügt

In der heutigen digitalen Ära spielen Webdesign und Geschwindigkeit eine entscheidende Rolle für den Erfolg einer Website. Eine effektive Möglichkeit, die Ladezeit zu optimieren und die Kontrolle über das Design zu behalten, besteht darin, Google Fonts aus einem WordPress-Thema wie GeneratePress zu entfernen und stattdessen Schriften lokal hinzuzufügen.

Google Fonts bieten eine große Auswahl an Schriftarten, die einfach in WordPress-Themen integriert werden können. GeneratePress, ein beliebtes WordPress-Thema, verwendet standardmäßig Google Fonts für die Typografie. Doch während die Verwendung von Google Fonts praktisch sein kann, können externe Ressourcen die Ladezeit einer Website verlangsamen und potenzielle Datenschutzrisiken mit sich bringen, insbesondere im Hinblick auf die DSGVO (Datenschutz-Grundverordnung).

Durch das lokale Hinzufügen von Schriften kannst Du diese Probleme umgehen. Lokale Schriften werden direkt von Deinem Server geladen, ohne dass auf externe Ressourcen von Drittanbietern zugegriffen werden muss. Dadurch kannst Du nicht nur die Ladezeit Deiner Website verbessern, sondern auch sicherstellen, dass Du volle Kontrolle über die verwendeten Schriften hast und die Datenschutzanforderungen erfüllst.

Bedeutung von Schriftarten für das Webdesign

Schriftarten spielen im Webdesign eine entscheidende Rolle, da sie maßgeblich dazu beitragen, wie eine Website wahrgenommen wird und wie gut sie ihre Botschaft vermittelt. Hier sind einige der wichtigsten Bedeutungen von Schriftarten für das Webdesign:

1. Lesbarkeit und Verständlichkeit: Die richtige Wahl der Schriftart verbessert die Lesbarkeit von Texten auf einer Website erheblich. Eine gut lesbare Schrift erleichtert es den Besuchern, den Inhalt zu verstehen und länger auf der Website zu bleiben.
2. Markenidentität: Die Verwendung einer bestimmten Schriftart kann dazu beitragen, die Markenidentität zu stärken und die Persönlichkeit einer Marke zu vermitteln. Eine konsistente Verwendung von Schriftarten in allen Kommunikationskanälen trägt dazu bei, das Markenimage zu festigen.
3. Ästhetik und Design: Schriftarten sind ein wichtiger, ästhetischer Bestandteil des Designs einer Website. Sie können dazu beitragen, die visuelle Anziehungskraft zu erhöhen und das Gesamtbild der Website zu verbessern.
4. Emotionale Wirkung: Verschiedene Schriftarten haben unterschiedliche emotionale Wirkungen auf die Betrachter. Zum Beispiel können serifenlose Schriftarten ein modernes und minimalistisches Gefühl vermitteln, während verschnörkelte Schriften eine eher verspielte und kreative Stimmung erzeugen können.
5. Benutzererfahrung (UX): Die Wahl der richtigen Schriftarten trägt wesentlich zur Benutzererfahrung bei. Eine gut gestaltete Typografie erleichtert es den Besuchern, sich auf der Website zu orientieren und die gewünschten Informationen schnell zu finden.
6. Barrierefreiheit: Barrierefreie Schriftarten, die speziell für Menschen mit Sehbehinderungen entwickelt wurden, verbessern die Zugänglichkeit einer Website und ermöglichen es einer breiteren Zielgruppe, auf den Inhalt zuzugreifen.

Insgesamt sind Schriftarten ein wesentlicher Bestandteil des Webdesigns, der weit über die rein visuelle Gestaltung hinausgeht. Sie beeinflussen die Wahrnehmung einer Website durch die Besucher und tragen maßgeblich dazu bei, wie effektiv die Botschaft einer Marke kommuniziert wird.

Warum man Google Fonts aus GeneratePress entfernen möchte

Es gibt mehrere Gründe, warum man Google Fonts aus einem WordPress-Thema wie GeneratePress entfernen möchte:

1. Ladezeitoptimierung: Externe Ressourcen wie Google Fonts können die Ladezeit einer Website beeinträchtigen, insbesondere wenn sie von einem entfernten Server geladen werden müssen. Durch das Entfernen von Google Fonts und das lokale Hinzufügen von Schriftarten können die Ladezeiten erheblich verkürzt werden, was zu einer besseren Benutzererfahrung führt und die Absprungrate verringern kann.
2. Datenschutz und DSGVO-Konformität: Externe Ressourcen von Drittanbietern, wie Google Fonts, können Datenschutzrisiken mit sich bringen, da sie Benutzerdaten erfassen können. Gemäß der Datenschutz-Grundverordnung (DSGVO) ist es wichtig, den Schutz personenbezogener Daten zu gewährleisten. Durch das lokale Hinzufügen von Schriftarten können potenzielle Datenschutzrisiken vermieden und die DSGVO-Konformität verbessert werden.
3. Designkontrolle: Durch das lokale Hinzufügen von Schriftarten behält man die volle Kontrolle über das Design und die Typografie der Website. Man kann genau die Schriftarten auswählen und anpassen, die zum Markenimage passen und die gewünschte visuelle Ästhetik vermitteln.
4. Unabhängigkeit von externen Diensten: Indem man Google Fonts entfernt, macht man die Website unabhängiger von externen Diensten. Dies kann besonders nützlich sein, wenn es zu Ausfällen oder Änderungen in den Diensten von Drittanbietern kommt, da die lokale Bereitstellung von Schriftarten weniger anfällig für solche Probleme ist.
5. Performance-Optimierung: Lokal gehostete Schriftarten können in Verbindung mit Caching-Mechanismen effektiver optimiert werden, um eine schnellere Ladezeit zu erreichen. Durch das Entfernen von externen Ressourcen wie Google Fonts kann die Website insgesamt performanter werden.

Insgesamt gibt es also verschiedene Gründe, warum man Google Fonts aus GeneratePress entfernen möchte, von der Verbesserung der Ladezeiten und Datenschutzkonformität bis hin zur Erhöhung der Designkontrolle und Unabhängigkeit von externen Diensten.

Schritt-für-Schritt-Anleitung: Google Fonts aus GeneratePress entfernen

Entfernen per Plugin oder ohne Plugin

Natürlich kann man die Schriftarten auch mit dem Plugin OMGF lokal einbinden, allerdings hat das ein paar Nachteile.

• Das Plugin ist nur unvollständig ins Deutsche übersetzt,
• Es kann Probleme mit der korrekten Ausführung geben, sodass das Ergebnis nicht immer zu 100 Prozent korrekt ist,
• Du hast ein weiteres Plugin installiert, welches Deine Datenbank belastet.

Aus diesen Gründen zeige ich Dir hier, wie man Google Fonts ohne zusätzliches Plugin lokal einbinden kann.

Deaktivieren der Google Fonts im Customizer

Zuerst musst Du evtl. vorhandene Schriftarten im Customizer entfernen. Hierzu gehst Du auf Design –> Customizer. Hier siehst Du nun Folgendes:

Hier klickst Du nun auf Typographie und solltest Folgendes zu sehen bekommen:

In diesem Bereich sollten bei einem frisch installiertem GeneratePress eigentlich keine Schriftarten vorhanden sein. Sofern Du dort welche sehen solltest, dann kannst Du diese löschen, indem Du sowohl bei Schriftverwaltung als auch bei Typographie-Manager jeweils auf den Mülleimer klickst.

Damit Du den Unterschied zur bisher angezeigten Systemschriftart zu der zu installierenden Schriftart direkt erkennst, habe ich für dieses Beispiel die Schriftart Zeyada ausgesucht.

Nach der Installation dieser Schriftart unter Verwendung der Google-API und dem Typographie-Manager sieht das Ganze nun so aus:

Wie Du siehst, hat sich die Schriftart im Customizer direkt verändert.

Aber nun wird die Schriftart ja über die Google-API ausgeliefert. Das muss deaktiviert werden. Hierzu klickst Du auf „Einstellungen der Schriftfamilie öffnen“, also den Pfeil, der direkt neben der Schriftart steht und deaktivierst die Google-API, indem Du den Schieberegler entsprechend nach links bewegst.

Jetzt wechselt die Schriftart wieder auf Deine Systemschriftart.

Download des benötigten Fonts

Nachdem die Verbindung zur Google-API getrennt ist, musst Du jetzt den gewünschten Fonts downloaden. Dies geht ganz schnell über den Google-Webfonts-Helper.

Dort gibst Du jetzt in das Suchfeld Deine gewünschte Schriftart ein, in diesem Beispiel also wieder Zeyada.

Nachdem Du dies erledigt hast, kannst Du Deine Schriftart unter Punkt 4 downloaden.

Jetzt musst Du die zip-Datei nur noch entpacken. Lass das Fenster der Seite noch offen, da Du es später noch einmal benötigst.

Hochladen der Google-Fonts

Hinweis: Wenn Du mit dem Hochladen von Dateien auf Deinem Server per FTP vertraut bist, kannst Du diesen Schritt überspringen und Deine Schriftdateien einfach in Deinen Theme-Ordner hochladen.

Nun, da Du Deine Google-Fonts hasst, musst Du diese auf Deinen Server hochladen.

Standardmäßig erlaubt es die WordPress-Mediathek nicht, Google-Fonts hochzuladen. Dies ist auf Sicherheitsbedenken bei einigen dieser Dateien zurückzuführen.

Du kannst jedoch den Upload dieser Dateien vorübergehend zulassen, indem Du die unten stehende Funktion zu Deiner Website hinzufügst. Vergiss aber nicht, diese wieder zu entfernen, nachdem Du fertig bist.

Hierzu musst Du Dir vorübergehend das Plugin Code-Snippets installieren und aktivieren.

Als Nächstes erstellst Du ein neues Snippet mit folgendem Inhalt:

add_filter( 'upload_mimes', function( $mimes ) {
    $mimes['woff']  = 'application/x-font-woff';
    $mimes['woff2'] = 'font/woff2'; 
    $mimes['ttf']   = 'application/x-font-ttf';
    $mimes['svg']   = 'image/svg+xml';
    $mimes['eot']   = 'application/vnd.ms-fontobject';

    return $mimes;
} );

Nachdem Du dieses Snippet für den Adminbereich aktiviert hast, kannst Du den Google-Font in Deine Mediathek hochladen.

Nachdem die Datei hochgeladen wurde, wird die Datei-URL benötigt. Diese erfährst Du in den Anhang-Details. Bei mir lautet die Datei-Url:

http://localhost/test/wp-content/uploads/2024/05/zeyada-v19-latin-regular.woff2

Für den nächsten Schritt wird jedoch lediglich die Datei-Url ohne den Namen der Datei benötigt, also

http://localhost/test/wp-content/uploads/2024/05/

CSS einfügen

Jetzt bist Du fast fertig! Jetzt musst Du nur noch die Google-Fonts in Deinem CSS referenzieren.

Hierzu musst Du zurück zur Google Fonts Helper-Website, von der Du die Schriftdateien heruntergeladen hast.

Unter dem Bereich CSS siehst Du ein Feld für das Ordnerpräfix. Dort fügst Du die URL ohne den Dateinamen ein, die Du oben notiert hast.

Kopiere nun oberhalb dieses Feldes das gesamte bereitgestellte CSS und füge es zu Deiner Website hinzu.

Dies machst Du, indem Du auf Design –> Customizer –> Zusätzliches CSS klickst. Dort kannst Du den gesamten CSS-Code einfügen.

Jetzt solltest Du schon die Auswirkungen Deines CSS-Codes im Customizer sehen können. Nach einem Klick auf „Veröffentlichen“ wirst Du es auch auf Deinem Blog sehen können.

Abschlussarbeiten

Überprüfe, ob Deine Google-Fonts auch tatsächlich jetzt lokal geladen werden und Du nicht irrtümlich die Google Font API noch aktiviert hast.

Solltest Du das Snippet zum Hochladen Deiner Schriftart bisher nicht deaktiviert oder gelöscht haben, dann hole dies bitte nach.

Natürlich kannst Du das Plugin Code-Snippets auch deinstallieren, wenn Du möchtest. Ich würde Dir aber empfehlen es nicht zu deinstallieren, da es viele weitere Anwendungsmöglichkeiten dafür gibt.

Eine weitere Anordnungsmöglichkeit zeige ich Dir jetzt.

In den Standard-Einstellungen des Gutenberg-Editors lädt das @font-face-CSS nicht, sodass die lokalen Schriftarten NICHT im Blockeditor angezeigt werden. Du kannst den Blockeditor jedoch zwingen, das CSS zu laden.

Wenn Du Deine Schriftarten @font-face CSS im Customizer –> Zusätzliches CSS hinzugefügt hast, dann füge dieses Snippet hinzu:

add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    $css = wp_get_custom_css_post()->post_content;
    $editor_settings['styles'][] = array( 'css' => $css );

    return $editor_settings;
} );

Wenn Du Deine @font-face-CSS-Schriftarten in die style.css-Datei Deines Child-Themes eingefügt hast, füge dieses Snippet hinzu:

add_filter( 'generate_editor_styles', function( $editor_styles ) {
    $editor_styles[] = 'style.css';

    return $editor_styles;
} );

Google-Fonts mit GeneratePress-Premium lokal speichern

Seit der Version 2.5 von GeneratePress-Premium gibt es auch die Möglichkeit, Google-Fonts direkt lokal zu speichern und zu aktivieren.

Hierzu klickst Du in Deinem WordPress-Dashboard auf Design und GeneratePress und aktivierst die Font Library.

Anschließend klickst Du auf “Open Font Library”.

Nun hast Du die Möglichkeit, die Fonts entweder direkt über Google zu installieren oder, sofern Du die Fonts bereits bei Dir lokal gespeichert hast, diese direkt hochzuladen. Ich zeige Dir hier die Möglichkeit, die Fonts über Google zu installieren. Dazu klickst Du auf “Install Google Fonts”.

Ich gebe als Beispiel mal die Schriftart Geo vor. Um diese Schriftart zu installieren, klickst Du auf „2 Variants“, aktivierst die Varianten Deiner Wahl und speicherst das Ganze unter „Install Selected“.

Nachdem Du die Schriftarten installiert hast, kannst Du Schriftart und die Anzeigeoptionen noch genauer konfigurieren. Das machst Du, in dem Du auf „Font Library“ und Geo klickst.

Unter „Advanced Options“ kannst Du weitere Einstellungen vornehmen.

Um die Schriftart Geo jetzt für Deinen Blog zu nutzen, musst Du nun lediglich das ganze noch über Customizer und Typographie entsprechend aktivieren.

Fazit

Die Entscheidung, auf lokale Schriftarten in einem WordPress-Thema wie GeneratePress umzusteigen, bietet eine Fülle von Vorteilen für Webdesigner und Website-Betreiber. Es ermöglicht nicht nur eine optimierte Website-Leistung, sondern minimiert auch potenzielle Datenschutzrisiken gemäß den Anforderungen der DSGVO. Durch die direkte Bereitstellung von Schriftarten vom eigenen Server aus wird die Ladezeit der Website verkürzt und die Abhängigkeit von externen Diensten reduziert.

Ferner eröffnet die Verwendung lokaler Schriftarten neue Möglichkeiten zur Gestaltung und Individualisierung des Website-Designs. Webdesigner können genau die Schriftarten auswählen und anpassen, die am besten zum Markenimage und zur visuellen Ästhetik der Website passen. Dies trägt zu einer einheitlichen Markenidentität und einer ansprechenden Benutzererfahrung bei, die die Besucher der Website begeistert.

Insgesamt ist die Umstellung auf lokale Schriftarten in GeneratePress eine Win-win-Situation: Website-Betreiber profitieren von einer verbesserten Leistung und Datenschutzkonformität, während Webdesigner mehr Gestaltungsfreiheit und Kontrolle erhalten. Durch die Befolgung der Schritte in dieser Anleitung können Website-Betreiber die Vorteile lokaler Schriftarten voll ausschöpfen und ihre Websites auf ein neues Level der Effizienz und Anpassungsfähigkeit heben.

Bereit, die Vorteile lokaler Schriftarten zu nutzen und Deine Website zu optimieren? Teile mir Deine Gedanken und Erfahrungen in den Kommentaren mit!