Google Fonts ohne Plugin selbst hosten – so einfach funktioniert es!

Bitte lassen Sie sich nicht von der Länge dieses Beitrags abschrecken. Zwei Drittel des zeitlichen Gesamtaufwandes besteht aus Lesen. Rechnen Sie mit sehr gemütlichen 30 Minuten Lesezeit für diesen Beitrag inklusive Video und 15 Minuten Arbeitszeit.

Bei dieser Anleitung gehe ich erstens davon aus, dass Sie schon ein paar der rund 96.00 Beiträge zu diesem Thema gelesen haben. Zweitens sollten Sie unbedingt die 5 1/2 Minuten in das Video investieren – das hilft ungemein!
Motivierten Einsteigern empfehle ich davor das Tutorial Google-Fonts selbst hosten im SelfHtml Wiki.

Grundlage dieses Beitrags sind die Anleitungen Adding Local Fonts (Tutorial aus der Dokumentation von GeneratePress) und Wie du Google Fonts lokal und DSGVO-konform in WordPress einbindest. (von BLOGMOJO aka. Finn Hillebrandt).

1) Schrift aussuchen und herunterladen

Schrift aussuchen: https://fonts.google.com/
Download: https://google-webfonts-helper.herokuapp.com/fonts
Tipp: Diese Seite geöffnet lassen. Wir kommen bei Punkt 3 wieder zurück.

2) Schrift hochladen

Ohne Plugin mit FTP

In anderen Anleitungen wird als Ziel oft /wp-content/themes/ihr-theme/fonts genannt. Das hat bei mir aus unerfindlichen Gründen nicht geklappt. Außerdem ist dieser Speicherort langfristig ungeschickt gewählt. Stichwort Wechsel oder Update des Themes.

Mit dem Editor (empfohlen)

Empfohlen deshalb, weil es funktioniert! Falls Sie kein Plugin installieren wollen, fügen Sie den folgenden Code in ihre Datei functions.php ein.

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

    return $mimes;
} );

Das im Video empfohlene Plugin Code Snippets (deutsch) empfehle sogar ich als Plugin-Sparer aus mehreren Gründen:

Das Plugin ist bestens gewartet, hat über 600.000 Anwender und über 300 5 Sterne Beurteilungen.
Mit der Methode Copy-and-paste an der lebenden functions.php herumzudoktern ist nie eine gute Wahl. Erstens wird das mit der Zeit unübersichtlich und zweitens nenne ich als Beispiel die berüchtigte fehlende schließende Klammer } oder das Semikolon ;.
Tipp 1: Wenn schon, dann die ganze Datei in einem Editor (Tipp: Notepad++) bearbeiten und sichern!
Tipp 2: Selbiges gilt für die Custom CSS (zusätzliches CSS im Customizer).
Das Plugin hat nahezu keine Auswirkung auf die Performance.
Kann bei seltener Verwendung auch nur temporär installiert werden.

Achtung: Aus Sicherheitsgründen sollte das Snippet sofort nach erfolgtem Upload gelöscht beziehungsweise deaktiviert werden.

3) Schrift mit CSS und @font-face einbinden

In Ordnung, wir sind fast fertig! Jetzt müssen wir unsere Schriftarten in unserem CSS referenzieren.

Kehren wir zu unserer Google Fonts Helper-Website (siehe oben, Punkt 1 b) zurück, auf der wir die Schriftartdateien heruntergeladen haben.

Unter all dem CSS sehen Sie ein Feld für das Ordnerpräfix. Dort fügen wir die folgende URL hinzu.

a) Angenommen, Ihre Schriften liegen im Ordner ihre-domain.at/wp-content/uploads/2022/02/.
b) Eleganter, aber etwas mehr Aufwand wäre ihre-domain.at/wp-content/uploads/fonts/.

Google Fonts ohne Plugin selbst hosten – so einfach funktioniert es! — Grafik von GeneratePress

3.1) Feintuning Tipp

Hier könnt oder sollte man dem vorgegebenen CSS Code font-display: swap hinzufügen.
Anmerkung: Gibt der Schriftart eine sehr kleine Blockperiode und eine unendliche Austauschperiode (Quelle: W3docs.de). Dikese Einstellung wird im Netz sehr oft empfohlen.
Das ist ein einmaliger Aufwand, der aber später ein Plugin sparen kann. Weiteres unter Punkt 4.

@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('https://…
  src: local(''),
       url('https://…

Die Top 3 Plugins, die das Laden von Google Fonts unterbinden

Sehr viele Themes laden ihre Schriften direkt von Google. Angeblich trackt Google jeden Browser, also Sie, der Google Fonts benutzt. Das wäre natürlich nicht DSGVO-konform.
Genau deshalb machen wir das hier ja.

Jetzt kommt der Punkt, an dem sich unsere Wege eventuell trennen werden. Im Font Manager von GeneratePress muss der Regler auf Off stehen.

Ehrlich gesagt, weiß ich gar nicht, ob dieser Font-Manager von Gutenberg oder von GerneratePress kommt, und ja, ich schäme mich dafür.

Plugins

Die beiden ersten Plugins kenne ich selbst nicht, aber sie wurden im Verlauf meiner Recherchen mehrmals lobend erwähnt. Asset CleanUp habe ich schon seit längerem in Verwendung. Nur die Funktion zum kompletten Entladen (site wide rule) von Google Fonts konnte ich erst heute aktivieren!

Disable and Remove Google Fonts (deutsch)
OMGF | Host Google Fonts Locally
Asset CleanUp: Page Speed Booster (Editors‘ Choice!) — siehe meine Rezension, empfohlen auch von GTmetrix und WP Rocket und CloudFlare!

4) FOIT und FOUT vermeiden

Dieser Punkt beruht hauptsächlich auf Punkt 6 einer gleichwertigen ( 😉 ) Anleitung von Blogmojo.de. Falls Sie meinem Pfad nicht trauen, sind Sie bei Finn Hillebrandt in besten Händen!

Flash of Invisible Text (FOIT): Es wird gar kein Text angezeigt, bevor deine Google Fonts geladen werden
Flash of Unstyled Text (FOUT): Es wird zunächst ein Standard-Font angezeigt, der dann durch deine Google Fonts ausgetauscht werden.

Punkt eins wird, ohne Plugin vermieden, mit dem schon erwähnten font-display: swap (siehe oben 3.1).

Punkt zwei (FOUT) wird ohne Plugin durch <link rel="preload"> vermieden, indem es die Fonts vorlädt. Das würde dann im HTML so aussehen:

<head>
<link rel="preload" href="/fonts/inter-v2-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
</head>

5) Powertuning mit Plugin

Am leichtesten geht das per Plugin. So vermeidest du, im Code deines Themes herumzuwursteln (bei manchen Themes ist es gar nicht so leicht, deren Ursprung ausfindig zu machen).
Finn Hillebrandt

Das Vorladen von Fonts mittels Plugin ist die angenehmere und sicherere Methode. Man denke an einen Theme-Wechsel oder -Update. Wenn Sie jetzt an Child-Themes als Absicherung denken, liegen Sie völlig richtig. Aber für mich gilt das als „aufgeschoben ist nicht aufgehoben“.

Viel lieber verlasse ich mich dafür auf 2–3 hochwertige, zusätzliche Plugins:

WP Rocket (49 USD / Jahr): Die vorzuladenden Fonts in den Einstellungen > WP Rocket > Cache füllen > Fonts vorladen.
Asset CleanUp: Page Speed Booster (Freemium!). Für das automatische Einfügen von font-display: swap (siehe Punkt 3.1, Feintuning) ist jedoch die Pro-Version (€ 43 / Jahr) erforderlich.

Man kann auch beide Plugins gleichzeitig am Laufen haben. Jedoch sollte man sich bei überschneidenden Funktionen wie in diesem Fall für eine Seite entscheiden.

asset-cleanup-local-fonts-screenshot — Einstellungen in Asset CleanUp

Ein nicht unerheblicher Arbeitsaufwand ist die formgerechte Erstellung der Liste Preload Local Font Files.45 Zeilen waren in meinem Fall zusammen zu stoppeln. Sehr hilfreich dabei war mein langjähriger Editor Notepad++.

Anmerkung: Duba.blog nutzt Oswald für Überschriften (regular, 500) und Open Sans (alle Formate für den Rest.

Beide Plugins erzeugen sinngemäß den folgenden Code im Bereich HEAD — /HEAD.

<link rel="preload" as="font" href="/wp-content/themes/your-theme-dir/fonts/lato.woff" data-wpacu-preload-font="1" crossorigin>
<link rel="preload" as="font" href="/wp-content/plugins/plugin-title-here/fonts/fontawesome-webfont.ttf?v=4.5.0" data-wpacu-preload-font="1" crossorigin>

6) Google Fonts mit Plugin entfernen

6.1) Perfmatters

Kostenpflichtiges Top Plugin aus dem Hause KINSTA. Perfmatters ist für mich der Aufsteiger 2021 unter den kostenpflichtigen Performance-Plugins. Mein Eindruck: Mindestens gleichwertig mit WP Rocket, kostet aber nur rund die Hälfte (24,95 USD / Jahr).

6.2) Autoptimize

Das Plugin kostenlose Autoptimize ist mir noch unbekannt, aber bei 1+ Millionen Downloads muss jedenfalls was dran sein!

6.3) Asset CleanUp

Ich nutze Asset CleanUp seit Monaten und bin zufrieden. Man muss nur bedachtsam mit „der Macht im rechten Zeigefinger“ umgehen. Tipp: Immer den eingebauten Test-Modus nutzen.

Positiv: Sehr viele Einstellmöglichkeiten bereits in der freien Version. Bestens kompatibel mit WP Rocket und CloudFlare.
Negativ: Für das Einfügen von font-display: swap in die CSS der Fonts (einmalige händische Nachbearbeitung von 10 Minuten) ist die Pro-Version erforderlich.

Fazit

Man muss schon ein sehr motivierter Datenschützer sein, um diesen Aufwand nur wegen der DSGVO zu betreiben. Auch wegen der eingesparten HTTP_Anfragen oder der relativ mickrigen Leistungssteigerung lohnt der Aufwand nicht.

Aber die Tatsache, es geschafft und aus eigener Kraft dem großen Google ein Schnippchen geschlagen zu haben, erhöht das Selbstwertgefühl ungemein. Oder nicht?

Bitte verzeihen Sie, dass ich meine oben versprochene Lesezeit etwas überschritten habe. Dafür habe ich mich sehr um eine halbwegs übersichtliche Seitenstruktur bemüht. Außerdem hat sich dadurch der Informationsgehalt exponentiell gesteigert. Am besten überschlafen sie das Projekt Local Google Fonts einmal und ziehen es dann morgen ausgeruht durch, wenn Sie wirklich wollen.

Liebe Grüße und bleibts gsund!

Bild von Uwe Baumann auf Pixabay

Erzähle es weiter:

Twitter Facebook Pinterest WhatsApp