Google Fonts DSGVO sicher nutzen zu können ist wichtig. Niemand weiß, welche Daten Google beim Abruf der Fonts speichert. Mit Fonty bekommst Du eine Live-Vorschau der Schriftart auf Deiner Website und kannst die Fonts DSGVO sicher von Deiner eigenen Website laden lassen.
Fonty heißt ein echt cooles neues Tool, dass aus zweierlei Gründen zu begeistern weiß. Du kannst Deine eigene Website im Tool aufrufen und die coolen Google Fonts live auf Deiner Website sehen.
Das macht die Auswahl der Schriftarten viel einfacher, weil Du siehst, wie sie auf Deiner Website aussehen. Hast Du Dich für einen oder mehrere Fonts entschieden, kannst Du die Schriftarten herunterladen und aus Deinem Theme-Ordner heraus laden.
Da keinerlei Verbindung zu Google oder anderen Websites beim Aufruf der Fonts stattfindet, sind die Google Fonts DSGVO sicher eingebaut und nutzbar!
Google Fonts DSGVO sicher nutzen und in Dein Theme einbauen mit Fonty
Da Fonty ein Online-Tool ist, musst Du es zuerst aufrufen.
Fonty aufrufen »Google Fonts DSGVO sicher einbauen – die Überschrift
Auf der Linken Seite kannst Du den Font für den Titel oder den Text auswählen.
Nun gibst Du Deine Website-URL in das Fenster ein und klickst auf Enter.
Deine Website erscheint im Tool:
Wähle jetzt den den Titel (die Überschrift) aus und klicke die Fonts durch, bis Dir einer gefällt.
Google Fonts DSGVO sicher nutzen – der Fliesstext
Du kannst natürlich auch noch einen Font für die Schriftart des Fliesstextes aussuchen.
Fonty: Der Download der Fonts und die Integration in Dein Theme
Klicke oben rechts in der Ecke auf »Download«.
Danach öffnet sich ein Fenster, in dem Du den Download auswählen kannst. Das Herunterladen des Fonts ist wichtig, wenn Du Google Fonts DSGVO sicher einbauen willst.
Danach wirst Du zu der Website Google Webfont Helper geleitet, wo Du noch eine Auswahl treffen musst, welche Varianten der Schriftart Du downloaden möchtest.
Zwei Einstellungen sind vor dem Download zu treffen. Erstens wähle »Modern Browsers« aus, zweitens ändere den Ordner-Präfix wie auf dem Screenshot in fonts/
ab.
Lade jetzt Deinen Font herunter und entpacke die Datei.
Die Google Fonts DSGVO sicher in Dein Theme einbauen
Wenn Du ein Theme einsetzt, dass auch Updates bekommen soll, dann solltest Du jetzt ein Child-Theme anlegen. Denn ansonsten wären Deine Änderungen nach dem nächsten Update verschwunden.
Lege nun einen Ordner mit dem Namen fonts
an und kopiere die Schriftarten aus der heruntergeladenen Datei in den Ordner fonts
hinein.
Rufe nun per FTP Deinen Theme-Ordner auf und lade Deinen fonts
Ordner in das Theme-Hauptverzeichnis hinein. Der Pfad zu Deinen Theme-Ordner ist der folgende:
/wp-content/themes/dein-theme/
Ergänze nun das CSS Deines Themes um den Code, den Du von Fonty bekommen hast (letzter Screenshot). Die richtige Stelle wäre ganz oben im CSS zu finden.
@font-face {
font-family: 'Averia Serif Libre';
font-style: normal;
font-weight: 400;
src: local('Averia Serif Libre Regular'), local('AveriaSerifLibre-Regular'),
url('fonts/averia-serif-libre-v7-latin-regular.woff2') format('woff2'),
url('fonts/averia-serif-libre-v7-latin-regular.woff') format('woff');
}
@font-face {
font-family: 'Averia Serif Libre';
font-style: normal;
font-weight: 700;
src: local('Averia Serif Libre Bold'), local('AveriaSerifLibre-Bold'),
url('fonts/averia-serif-libre-v7-latin-700.woff2') format('woff2'),
url('fonts/averia-serif-libre-v7-latin-700.woff') format('woff');
}
Das ergänzte CSS lädst Du wieder in den Theme-Ordner hoch.
Solltest Du Plugins wie Autoptimize oder ein Caching-Plugin für Deine Website nutzen, musst Du den Cache löschen.
Wenn Du Dir jetzt Deine Website anschaust, sind die neuen Schriftarten zu sehen! Und da Du die von Deinem eigenen Webhosting / Server lädst, sind sie vollkommen DSGVO sicher.
Wenn Dein Theme bereits Fonts von Google-Servern lädt
Viele Themes nutzen die beliebten Google Fonts und lassen diese direkt von den Google-Servern laden. Das ist einfach und schnell erledigt, jedoch keinesfalls DSGVO sicher!
Du musst also die Dateien am Laden hindern, wenn Du die Schriftarten DSGVO Sicher einbauen willst. Doch keine Angst, das ist schnell behoben.
Wie Du das originale Google Fonts CSS am Laden hinderst
Rufe Deine Website auf, mache einen Rechtsklick auf eine freie Fläche und wähle im Kontext-Menü den Eintrag »Seitenquelltext anzeigen«. Dort suchst Du nun nach Dateien, die mit https://fonts.googleapis.com
beginnen.
Die ID des Links musst Du Dir merken, Du brauchst sie gleich. Das CSS am Ende wird nicht kopiert. Die ID wäre also in diesem Fall twentysixteen-fonts
.
In Deinem Theme kann die wichtige ID auch anders lauten. Kopiere die richtige ID und lasse das -css
am Ende weg.
Lade Dir nun die functions.php Deines aktiven Themes herunter und ergänze dort folgenden Code:
<?php
function ah_dequeue_files() {
wp_dequeue_script( "twentysixteen-fonts" );
wp_deregister_script( 'twentysixteen-fonts' );
}
add_action('wp_print_styles', 'ah_dequeue_files', 100);
Speichere die Datei und lade sie wieder in Deinen Theme-Ordner hoch. Wenn Du jetzt Deine Website aktualisierst, dann sollte die Datei aus dem Quellcode verschwunden sein.
Fazit
Google Fonts und Fonty gehen eine wirklich nützliche Verbindung ein! Endlich kannst Du live auf Deiner Website die Fonts anzeigen lassen und so ganz einfach die passenden Schriftarten auswählen. Danach bekommst Du die Fonts als Download und das nötige CSS zur Anzeige. Perfekt! So einfach kannst Du die Google Fonts DSGVO sicher nutzen und in Dein Theme einbauen.
28. Juli 2018 um 12:11
Hallo Andreas Hecht!
Habe vergangene Tage es nochmals mit einem anderen Theme durchprobiert.
Das verwendete Free-Theme heißt Happenstance. Als Test Schriftart habe ich Source Sans
aus Fonty genommen. Es hat anscheinend funktioniert. Frage wie und wo kann ich feststellen
ob die Änderung wirklich durchgeführt wurde? Danke im Voraus.
LG Alexander
28. Juli 2018 um 14:14
Hi,
die Google Chrome Erweiterung »WhatFont« ist da hilfreich.
23. Juli 2018 um 15:37
Hallo Andreas Hecht!
Sorry das ich mich länger nicht gemeldet habe.
Ich habe deine Codes in die style.css und functions.php des Sydny Child-Theme eingetragen
und die ID angepasst. Die Zeilen mit den Google-Fonts ist im „Seitenquelltext anzeigen“ immer
noch zu lesen. Vermute das die Deregistrierung nicht geklappt hat.
LG
Alexander
18. Juli 2018 um 10:27
Hallo Andreas Hecht!
Ich verwende ein Child-Theme von Sydney und möchte deine Beschreibung zum sicheren
Einbau der Fonts umsetzen. Habe jeden Schritt einzeln umgesetzt. Die Codes sind in der
style.css und functions.php des Child-Theme eingetragen. Irgendwie will es nicht klappen. Verwende kein Caching-Plugin.
Das Child-Theme läuft in einer lokalen WAMPSERVER Umgebung.
Danke im Voraus für deine Hilfe.
LG Alexander
18. Juli 2018 um 13:14
Moin Alexander,
wenn ich helfen soll, dann solltest Du schon mehr Details liefern. Was genau funktioniert nicht? Die Anzeige der Fonts oder das De-registrieren der Original Font-Datei Deines Themes?
12. Juli 2018 um 9:21
Moin Andreas,
ein hervorragender Artikel. Sehr gute Darstellung der Umsetzung. Sollte somit auch für Laien umsetzbar sein.
Ich bin immer wieder begeistert mit welcher Einfachheit von Dir solche komplexen Dinge dargestellt werden.
Absolut empfehlenswert.
Danke dafür. Gruß Rolf
12. Juli 2018 um 13:25
Hi Rolf,
danke für das Kompliment! Ich persönlich bin echt begeistert von dem Tool.