Google Fonts datenschutzkonform einbinden am Beispiel WordPress

By | 2. Mai 2019

Immer, wenn du eine Website aufrufst, die Google Fonts eingebunden hat, werden die benötigten Schriften vom Google Server geladen oder es wird ein Kontakt zu Google Servern hergestellt, wobei sich “erkundigt” wird, ob es eine Veränderung der Fonts gegeben hat. Hierbei werden unter anderem IP-Adressen ausgelesen und gespeichert.

Vorher: vorinstallierte Google Fonts deaktivieren bei WordPress

und dann:

Google Fonts auf dem eigenen Server zur Verfügung stellen:

Die Schriften im Google-Fonts-Katalog sind Open Source und werden unter Lizenzen veröffentlicht, die sowohl private als auch kommerzielle Nutzung erlaubt.

  1. Schrift aussuchen https://fonts.google.com
  2. Habt Ihr eine bestimmte Vorstellung, dann Google fragen: Webfont ähnlich Schrift XY
  3. https://google-webfonts-helper.herokuapp.com/fonts
  4. Schrift runterladen
  5. Auspacken,
  6. Ordner fonts entweder in der Theme-Struktur  (Child-Theme) oder unter wp-content (Customizer) ablegen
  7. CSS kopieren

Wenn Ihr eine Schrift im https://google-webfonts-helper.herokuapp.com/fonts gefunden habt und die Schriften abgespeichert habt, könnt Ihr im CCS eine absolute Pfadangabe machen.

Google Font serverseitig einbinden

  • die Webadresse ist http://dozent.digitalfahrschule.de
  • auf der Root-Ebene liegen die Fonts
    ACHTUNG: die Fonts liegen direkt im Fonts-Ordner, also nicht in fonts/pt-sans/….
/* abeezee-regular - latin */
@font-face {
  font-family: 'ABeeZee';
  font-style: normal;
  font-weight: 400;
  src: url('http://dozent.digitalfahrschule.de/fonts/abeezee-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('ABeeZee Regular'), local('ABeeZee-Regular'),
       url('http://dozent.digitalfahrschule.de/fonts/abeezee-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('http://dozent.digitalfahrschule.de/fonts/abeezee-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('http://dozent.digitalfahrschule.de/fonts/abeezee-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('http://dozent.digitalfahrschule.de/fonts/abeezee-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('http://dozent.digitalfahrschule.de/fonts/abeezee-v12-latin-regular.svg#ABeeZee') format('svg'); /* Legacy iOS */
}

Google Fonts serverseitig einbinden

Die jeweilige Klasse im Theme muss  angesprochen werden

Hier die Überschriften der Seiten/Beiträge:

.entry-title { font-family: 'Clicker Script';}

Webschriftarten

Derzeit werden vier Formate von Schriftartcontainern im Internet verwendet: EOT, TTF, WOFF und WOFF2. (…)

EOT eignet sich nur für den IE, TTF bietet partielle IE-Unterstützung, WOFF verfügt über die breiteste Unterstützung, ist aber in einigen älteren Browsern nicht verfügbar und die WOFF 2.0-Unterstützung ist für viele Browser noch nicht implementiert. (…)

Liefern Sie die WOFF 2.0-Variante für Browser, die diese unterstützen. Liefern Sie die WOFF-Variante für die Mehrzahl der Browser. Liefern Sie die TTF-Variante für alte Android-Browser (vor 4.4). Liefern Sie die EOT-Variante für alte IE-Browser (vor IE9).

Schriftformate für den Druck, bzw. Desktop

EOT und WOFF sind ausdrückliche Webformate, TTF und OTF sind Desktop-Formate, die ebenfalls im Browser funktionieren können

Mehr dazu hier https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=de

Schreibe einen Kommentar

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