Tutorials Fonts gehören auf deinen Server

Google Fonts DSGVO sicher einbauen und live testen mit Fonty

Google Fonts DSGVO sicher einbauen mit Fonty

Google Fonts DSGVO sicher einbauen 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 einbauen.

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 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.

Klick das Bild an für eine größere Auflösung.

Nun gibst Du Deine Website-URL in das Fenster ein und klickst auf Enter.

Deine Website erscheint im Tool:

Klick das Bild an für eine größere Auflösung.

Wähle jetzt den den Titel (die Überschrift) aus und klicke die Fonts durch, bis Dir einer gefällt.

Klick das Bild an für eine größere Auflösung.

Google Fonts DSGVO sicher einbauen – der Fliesstext

Du kannst natürlich auch noch einen Font für die Schriftart des Fliesstextes aussuchen.

Klick das Bild an für eine größere Auflösung.

Fonty: Der Download der Fonts und der Einbau 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.

Regular und 700 ist eine gute Wahl.

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.

Klick das Bild an für eine größere Auflösung.

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.

/* 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 Google Font Datei im Quellcode der Website

Ein Klick öffnet eine größere Auflösung.

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 in Dein Theme einbauen.

Andreas Hecht

Andreas Hecht

Er entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google.

Bleib informiert und abonniere den Newsletter

Hol Dir die neuesten Beiträge über WordPress und SEO direkt in Deinen Posteingang. Als Dankeschön bekommst Du Gratis meine Checkliste:

12 Dinge, die Du vor einem Theme-Wechsel beachten solltest.

Ja, ich bin einverstanden, dass meine Daten gespeichert werden und möchte den Newsletter abonnieren!

Das könnte auch interessant sein...

Das Perfmatters WordPress Performance Plugin macht dein WordPress raketenschnell

Auch Laien machen Ihre Website damit raketenschnell! Lies den Artikel dazu...

7 Kommentare Kommentar hinzufügen

  1. 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

  2. Alexander Wieshofer

    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

  3. Alexander Wieshofer

    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

  4. Alexander Wieshofer

    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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Do NOT follow this link or you will be banned from the site!
Wir benutzen Cookies um die Nutzerfreundlichkeit der Webseite zu verbessen. Durch Deinen Besuch stimmst Du dem zu.
Teilen