Tutorials Fonts gehören auf deinen Server

Fonty: Google Fonts DSGVO sicher nutzen und live testen

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.

Suchmaschinenoptimierung

1.000 Seiten Praxiswissen und Profitipps zu Google
Dieses Buch sichert Ihnen ein Top-Ranking bei Google. Einsteiger und Fortgeschrittene finden gleichermaßen fundierte Informationen zu allen relevanten Bereichen der Suchmaschinen-Optimierung. Die 9. Auflage wurde ergänzt um viele neue Themen: SEO-freundliche Relaunches, Google Search Console und alternative Suchmaschinen usw...

Nur 49,90€

Auf Amazon kaufen

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.

Einstieg in WordPress 5

Mit Peter Müller erstellen Sie Ihre eigene WordPress-Website
Sie planen eine eigene Website mit WordPress und suchen einen einfachen Einstieg? Dann liegen Sie mit dem neuen Buch von Peter Müller genau richtig. Er zeigt Ihnen, wie Sie mit WordPress eine eigene Webseite erstellen und veröffentlichen – auch ohne Vorkenntnisse. In einfachen Kapiteln lernen Sie WordPress als Redaktionssystem kennen und bauen Schritt für Schritt eine Onlinepräsenz auf.

Nur 24,90€

Auf Amazon kaufen

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 SEO Experte und bringt Deine Website in die Top-Rankings von Google.

Das könnte auch interessant sein...

Suchmaschinenoptimierung

1.000 Seiten Praxiswissen und Profitipps zu Google
Dieses Buch sichert Ihnen ein Top-Ranking bei Google. Einsteiger und Fortgeschrittene finden gleichermaßen fundierte Informationen zu allen relevanten Bereichen der Suchmaschinen-Optimierung. Die 9. Auflage wurde ergänzt um viele neue Themen: SEO-freundliche Relaunches, Google Search Console und alternative Suchmaschinen usw...

Nur 49,90€

Auf Amazon kaufen

7 Kommentare Kommentar hinzufügen

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

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

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

    • 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?

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

Schreibe einen Kommentar

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

Pinnen
Teilen
Teilen