In diesem Artikel möchte ich euch an dem Beispiel der Google Fonts „Roboto“ zeigen, wie ihr diese auf eurer WordPress Website lokal installiert und das ganz ohne Plugins.
Google Fonts beeinhaltet zur Zeit 1052 verschiedene Schriftarten, die unter einen OpenSource Lizenz stehen. Diese können frei verwendet werden und WordPress greift auf diese ebenfalls standardmäßig zu. Da sich die Lizenzierung auch ändern kann, prüft bei eurer gewählten Schriftart, ob ihr die Rechte dafür besitzt.
Warum solltet ihr euch den Aufwand machen und die Google-Fonts lokal installieren? Standardmäßig verbindet sich WordPress mit Google um die Fonts (Schriftarten) extern in die Website einzubinden. Bindet ihr die Fonts in eure WordPress Installation ein, muss keine Verbindung zu dem Google Server für die Schriftart aufgebaut werden, was euch ein Plus an Performance geben kann. Viel wichtiger finde ich, dass ihr hier auf den Google Server verzichten könnt und damit noch datenschutzfreundlicher unterwegs seid.
Klar gibt es hier auch eine Reihe von Plugins für WordPress, doch diese blähen den Code der Website nur unnötig auf. Das kommt für mich nicht in Frage, da ich in diesem Aspekt doch noch zu altmodisch bin. Deswegen bevorzuge ich die manuelle Codeanpassung.
Vorraussetzungen:
- Child-Theme für WordPress. Eine Schritt für Schritt Anleitung findet ihr hier
- FTP-Client (ich verwende hier in dem Artikel FileZilla)
- SSH-Client
1. Google-Fonts herunterladen:
Die Google Fonts könnt ihr hier als herunterladen.
Die Website nimmt euch etwas Handarbeit ab, da die .woff-Dateien für WordPress schon im der zip-Datei enthalten sind. Ihr könnt euch die Schriftart eurer Wahl raus suchen. Ich habe mich für die Schriftart „Roboto“ entschieden. Unter Punkt 4. könnt ihr eure Schriftart dann als zip-Datei herunterladen.
Hinweis: Die Website noch nicht schließen, da der Code-Schnipsel unter CSS (Punkt 3) noch benötigt wird.
2. Entpacken
Die heruntergeladene zip-Datei befindet sich bei mir im Download-Ordner. Diese muss dann entpackt werden.
3. Verbindung mit eurerer Website über den FTP-Client
Als FTP-Client verwende ich FileZilla. Ihr könnt natürlich auch einen anderen FTP-Client nehmen. Zuerst müsst ihr euch mit eurem Server verbinden. Die Zugangsdaten erhaltet ihr von eurem Hoster.
Ist die Verbindung hergestellt, dann wechselt auf der linken Seite (Lokal/Laptop/PC) zu dem entpackten Verzeichnis. Bei mir ist es unter ~/Downloads/roboto-v27-latin. Auf der rechten Seite (Server) habe ich einen neuen Ordner „fonts“ mit einem Rechtsklick angelegt. In diesen Ordner könnt ihr dann alle entpackten Dateien uploaden/kopieren. Das sollte nur ein paar Sekunden in Anspruch nehmen.
4. Anpassen der Datei „style.css“
Die Schriftart muss noch in der „style.css“ im Child-Theme hinterlegt werden. Dazu passt die Datei mit einem Editor eurer Wahl an und ergänzt den Code:
/* roboto-regular - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local(''),
url('https://digun.de/fonts/roboto-v27-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://digun.de/fonts/roboto-v27-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
Unter dem Punkt: „Customzie Folder prefix“ habe ich den Speicherort auf meinem Webhosting Paket/Server für die Google Fonts „Roboto“ hinterlegt. Falls ihr euch für einen anderen Speicherort entschieden habt, dann müsst ihr das Verzeichnis noch anpassen.
5. Entfernen von „externen“ Google Fonts aus dem WordPress-Theme
Standardmäßig verwendet das Child-Theme die Einstellungen von der übergeordneten Parent-Theme-Seite. Dementsprechend nutzt auch das Child-Theme die extern eingebunden Google Fonts. Um die lokale Google Fonts auf dem eigenen Server zu verwenden ist noch etwas Handarbeit notwendig.
Dafür muss im ersten Schritt der Code auf die exterene Seite von Google Fonts im Theme gefunden werden und anschließend im Child-Theme angepasst werden. Die Anpassung im Child-Theme ist notwendig, da bei einem Update der Parent-Themes auch die Einstellungen überschrieben werden. Modifikationen bleiben im Child-Theme bei einem Update bestehen.
5.1 Suche nach „Google“ im verwendeten WordPress Themes-Ordner suchen
Mit ssh lässt sich dann eine sichere Verbindung zum Hostinganbieter herstellen. Ein sicheres Passwort ist für so eine Verbindung für mich pflicht. Ist die Verbindung hergestellt und kann mittels der Bash auf die Ordnerstruktur zugegriffen werden.
Auf der Bash können auch einfache Linux-Befehle ausfgeührt werden. Mit:
grep "googleapis\|gstatic" * -r
wird eine Liste erzeugt mit allen Dateien die das Wort „ googleapis“ oder
„gstatic“ verwenden. Dieser Befehl sollte einen Eintrag liefern.
Bei mir ist es wie in der Ausgabe zu sehen die Datei „twentysixteen/functions.php“ im Parent-Theme. Öffnet ihr die Datei könnt ihr mit einem Editor nach „gstatic“ suchen und findet den passenden Ausschnitt. Die URL ist einer Funktion untergebracht die sich hier „wp_style_is“ nennt. Der erste Parameter ist für die Codeanpassung wichtig. Hier in dem Fall ist das „twentysixteen-fonts“.
Mit diesem Wissen lässt sich die Datei
„twentysixteen-child/functions.php“ im Child-Theme anpassen. Wir ergänzen die Datei mit eine Funktion, wie im folgenden Code zu sehen:
/* Remove Google Fonts */
function
remove_google_fonts() {
wp_dequeue_style('twentysixteen-fonts');
wp_deregister_style('twentysixteen-fonts');
}
add_action('wp_enqueue_scripts', 'remove_google_fonts', 100);
Da ich das Theme „twentysixteen“ in WordPress verwende, kann es
bei euch natürlich etwas anderes heißen. Dementsprechend müsst ihr
diesen Teil anpassen.
Zu guter Letzt
Habt ihr eine neue Schriftart entschieden, dann könnt ihr Sie nach löschen den Caches und reload der Seite die neue Schriftart nun bewundern. Alternativ könnt ihr auf der Website von Webkoll unter dem Punkt „Drittanfragen (third party)“ euer Ergebnis kontrollieren.
Mit dieser Methode könnt ihr jede Schriftart in WordPress installieren, für die ihr auch die Rechte habt.
Bildquellen:
Chat: Freepik from www.flaticon.com is licensed by CC 3.0 BY