Google Fonts DSGVO sicher nutzen und live testen mit Fonty

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

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.

/* averia-serif-libre-regular - latin */
@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'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/averia-serif-libre-v7-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* averia-serif-libre-700 - latin */
@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'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/averia-serif-libre-v7-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

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
    
// Ab hier kopieren    

function ah_dequeue_files()  {
    // Gib Deine eigene ID anstatt twentysixteen-fonts ein
    wp_dequeue_script( "twentysixteen-fonts" ); // Die ID des CSS ohne css am Ende
    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.