Google Fonts lokal einbinden – in WordPress
Wenn du Google Fonts auf deiner Website verwenden möchtest, dann binde sie unbedingt lokal ein. So erhöhst du die Performance und vermeidest Ärger mit dem Gesetz.
Aus aktuellem Anlass: Werden Google Fonts über einen Google-Server geladen, dann werden an ihn Browserdaten und IP-Adressen deiner Websitebesucher geschickt. Letzteres ist zur Zeit ein beliebter Aufhänger für Abmahnungen. Google speichert keine Cookies. Dennoch sind die Fonts – gefühlt – auf jeder zweiten Website eingebunden. So könnten sie theoretisch Rückschlüsse auf Nutzeraktivitäten ziehen.
Wie lassen sich die Schriftarten einbinden?
Möchtest du Google Fonts auf deiner Website einrichten, dann starte bei „Habe ich bereits Google Fonts auf meiner Website? Und wenn ja, wie identifiziere ich sie?“.
Willst du sie dagegen nur lokal hosten, dann starte bei „Wie werde ich meine extern eingebundenen Google Fonts endgültig los?“.
Habe ich bereits Google Fonts auf meiner Website? Und wenn ja, wie identifiziere ich sie?
Hast du dich jemals mit den Google Fonts beschäftigt? Bist du dir sicher, dass du keine verwendest? Manchmal werden sie einfach über ein WordPress-Theme oder Plugins integriert, zum Beispiel Google Maps. Deswegen musst du das erstmal prüfen.
Ich prüfe das immer mit dem Chrome-Browser: F12 für die Entwickler-Tools drücken und auf den Tab „Sources“ gehen. Wenn sich dort „fonts.googleapis.com“ und / oder „fonts.gstatic.com“ befinden, dann werden bereits Google Fonts über einen Google Server eingebunden. Diese kannst du easy lokal hosten. Lies dazu weiter bei „Wie werde ich meine extern eingebundenen Google Fonts endgültig los?“.
Wo kann ich meine gewünschte Schriftart herunterladen?
Um an die Schriftart deiner Wahl zu gelangen, lade sie dir bei Google Webfont Helper herunter.
So gehst du vor:
- Suche im linken Teil der Website die gewünschte Schriftart.
- Bei „Select Charset“ (Zeichenkodierung) musst du sehr wahrscheinlich nichts einstellen – außer deine Website verwendet keine lateinischen Buchstaben.
- Bei „Select Styles“ legst du die Schriftstärken auf deiner Website fest. Am besten nimmst du hier die 400 für die normale Schrift und 700 für fette Schrift.
- Gib bei „Copy CSS“ unter dem Quellcode im Feld „Customize folder prefix“ den Pfad an, wo du später die Schriften auf deinem Server ablegst. Jetzt erst den CSS-Code kopieren und in einer Text-Datei abspeichern.
- Die Schrift bei „Download files“ herunterladen.
Wie lege ich die Google Fonts auf dem Server ab?
Entpacke die ZIP-Datei. Greife anschließend auf deinen Server zu, zum Beispiel mit FileZilla. Navigiere zum Hauptverzeichnis deiner Domain beziehungsweise zum Ordner, den du zuvor bei „Copy CSS“ angegeben hast. Dort erstellst du einen Ordner „fonts“ und legst du die zuvor heruntergeladenen Schriften ab.
Wo binde ich den CSS-Code auf meiner Website ein?
Sage jedem Browser, wo er deine Schriften findet. Binde dafür den CSS-Code in der style.css-Datei deines Child-Themes ein. Das kann zum Beispiel wie folgt aussehen:
/*
Theme Name: Hello Elementor
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Description: A plain-vanilla & lightweight theme for Elementor page builder
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Version: 2.5.0
Stable tag: 2.5.0
Requires at least: 4.7
Tested up to: 5.9
Requires PHP: 5.6
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hello-elementor
Tags: flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready
*/
/* saira-extra-condensed-regular - latin */
@font-face {
font-family: 'Saira Extra Condensed';
font-style: normal;
font-weight: 400;
src: url('../fonts/saira-extra-condensed-v11-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/saira-extra-condensed-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/saira-extra-condensed-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/saira-extra-condensed-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/saira-extra-condensed-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/saira-extra-condensed-v11-latin-regular.svg#SairaExtraCondensed') format('svg'); /* Legacy iOS */
}
/* saira-extra-condensed-700 - latin */
@font-face {
font-family: 'Saira Extra Condensed';
font-style: normal;
font-weight: 700;
src: url('../fonts/saira-extra-condensed-v11-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/saira-extra-condensed-v11-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/saira-extra-condensed-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/saira-extra-condensed-v11-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/saira-extra-condensed-v11-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/saira-extra-condensed-v11-latin-700.svg#SairaExtraCondensed') format('svg'); /* Legacy iOS */
}
Hinweis: Wenn du mehrere Schriften und Stärken verwendest, dann musst du jede einzeln hinterlegen. Weil du zuvor bei „Wo kann ich meine gewünschte Schriftart herunterladen?“ die benötigten Schriftstärken ausgewählt hast, werden diese im CSS-Code und in den Dateien berücksichtigt. Du musst nichts mehr machen.
Glückwünsch, du hast nun die Schriften lokal bei dir eingebunden.
Wie werde ich meine extern eingebundenen Google Fonts endgültig los?
Ganz leicht ersetzt du deine Fonts mit dem Plugin „OMGF – Optimize My Google Fonts„. Einfach installieren und aktivieren. In der Navigation „Einstellungen > Optimize Google Fonts“ auswählen, nach unten scrollen, speichern und fertig. Deine Schriftarten werden nun lokal gehostet und die Kommunikation zu Google Servern ist unterbunden.
Wenn du das Plugin nicht verwendest, dann lies unten weiter.
Wie unterbinde ich die Google Fonts mit Autoptimize?
Viele Websites verwenden das Plugin „Autoptimize“ ohnehin, um ihre Performance zu erhöhen. Deswegen ziehe ich es als Beispiel heran.
Da die Schriften noch über andere Plugins & Co. eingebunden sein können, musst du deren Aufruf verbieten. Ich mache dies mit dem Plugin Autoptimize. Du öffnest „WordPress > Einstellungen > Autoptimize > Extras“. Dort wählst du bei Google Fonts „Google Fonts entfernen“ aus.
Wie überprüfe ich meine Änderungen?
Überprüfe jede Änderung. Lösche deswegen den Cache deiner Website und deines Browsers. Anschließend schaust du dir die Änderungen in den Entwickler-Tools an. Wie das geht, habe ich bereits beschrieben bei „Habe ich bereits Google Fonts auf meiner Website? Und wenn ja, wie identifiziere ich sie?“.
Inhalt
Ich bin Eric,
Experte für Performance-Marketing, Spezialist für Websites und Social Media, Early Adopter digitaler Produkte, Eisbader und Hindernisrennen-Läufer.
Wenn du Unterstützung für deine Website benötigst, dann lass es mich wissen. Gerne spreche ich mit dir über deine Herausforderungen – ganz unverbindlich. Gemeinsam finden wir eine passende Lösung.
