4. Google Fonts im Child Theme installieren
Last but not least, müssen Sie die auf Ihrem Server hochgeladenen Fonts in Ihrem WordPress Child Theme installieren. Leider reicht der Upload auf dem FTP Server nicht aus: So sind die Schriften zwar physisch auf dem Server verfügbar, aber weder WordPress oder der Browser wissen, dass die Fonts existieren oder wie sie diese verwenden sollen.
Somit müssen die Schriften für die Erkennung und Zuordnung installiert werden – und das nicht etwa im Parent Theme, sondern im Child Theme. Installieren Sie die Schriften nur im Parent Theme und nehmen somit Änderungen im style.css vor, werden diese bei einem Update überschrieben. Eine Installation im Child Theme schützt Sie somit davor, dass Ihre Anpassungen verloren gehen.
Bei der Installation Ihrer Google Fonts stehen Ihnen zwei Varianten zur Verfügung.
CSS herunterladen
Beim Download Ihrer Google Fonts können Sie auch das entsprechende CSS generieren. Dieser CSS-Code, den Sie auch aus dem Google Webfont Helper kopieren können, lässt sich dann in die style.css-Datei einfügen.
Dabei sollten Sie darauf achten, sicherzustellen, dass Sie den richtigen Zielpfad für die Schriftartendateien haben.
Dateipfade im CSS ersetzen und Childtheme aktualisieren
Nach der Implementierung des CSS-Codes müssen Sie in der CSS-Datei Ihres WordPress Child Themes den Schriften die gewünschten Elemente zuordnen.
Anschließend ist es wichtig, dass Sie das Child Theme aktualisieren. Ist dieser Schritt abgeschlossen, sollten Sie auch hier nochmals kontrollieren, ob die Google Fonts nun wirklich lokal eingebunden sind. Dafür lässt sich das Plugin Remover Google Fonts References installieren, welches noch vorhandene Google Fonts detektiert, nachdem Sie Ihren Cache gelöscht und das Plugin durchlaufen lassen haben.
Alternativ können Sie Ihre Website auch einer Überprüfung durch den Google Fonts Checker der Seite www.sicher3.de unterziehen. Geben Sie dafür einfach die URL Ihrer Website in den Checker ein, klicken Sie auf „überprüfen“ und warten Sie auf das Ergebnis.
Vorsicht bei Google Maps
Hach, es könnte alles so schön sein: Ihr Cookie-Hinweis läuft einwandfrei, Ihre Google Fonts sind lokal in WordPress eingebunden und die lästige Verbindung zum Google Server ist passé. Doch was ist das?! Da guckt doch schelmisch Google Maps um die Ecke!
Ja, Sie haben richtig gelesen – Google lässt sich nicht ganz so leicht ausbooten und hat bei seiner Applikation Maps noch ein kleines „Geschenk“ eingebaut, über das sich die DSGVO nicht freuen wird: Sofern Sie also Google Maps eingebunden haben, könnten Sie Probleme mit dem Datenschutz bekommen.
Grund dafür ist die Schrift Roboto, die standesgemäß für die Präsentationen in Google Maps genutzt werden und – Überraschung – vom Google Server geladen wird. Aber Gott sei Dank gibt es auch hierfür eine Lösung. Zwar lässt sich diese eine Google Font nicht lokal in WordPress einbinden, aber im Handumdrehen freundlich zur Tür hinaus begleitet werden. Wie? Indem Sie die Datei /js/norobotofontbymaps.js im entsprechenden Verzeichnis des Child Themes erstellen und folgenden Code in die Date übernehmen:
¡var head = document.getElementsByTagName('head')[0];//Save the original method
var insertBefore = head.insertBefore;
// Replace it!
head.insertBefore = function (newElement, referenceElement) {
if (newElement.href &&
newElement.href.indexOf('//Fonts.googleapis.com/css?family=Roboto') > -1) {
console.info('Prevented Roboto from loading!');
return;
}
insertBefore.call(head, newElement, referenceElement);
};
Zuguterletzt fügen Sie den folgenden Code in die php Ihres Child-Themes ein:
/*Prevent roboto Fonts loaded by google Maps api*/
$child_theme_url = get_stylesheet_directory_uri();
wp_register_script( 'norobotofontbymaps',
$child_theem_url.'/js/norobotofontbymaps.js', 'jquery', "1", true);
wp_enqueue_script ('norobotofontbymaps');
