Google Fonts & Icons datenschutzkonform in WordPress einbinden

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.

Bei jeder Nutzung von WordPress deaktiviere ich erstmal die voreingestellten Google Fonts und stelle dann meine gewählten Schriften selbst gehostet zur Verfügung.

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

Schritt für Schritt – Anleitung Google Fonts DSGVO-konform:

  1. Schrift aussuchen https://fonts.google.com
  2. hast du eine bestimmte Vorstellung von einer Schrift, z.B. Helvetica, die es so bei Google nicht gibt, google: Webfont ähnlich Helvetica
  3. auf dieser Homepage werden dir dann die verschiedenen Schriftschnitte und das CSS zur Verfügung gestellt: https://google-webfonts-helper.herokuapp.com/fonts
  4. Schrift runterladen
  5. Auspacken,
  6. Ordner fonts auf Root-Ebene deiner WordPress-Installation erstellen, und dort die Schrift reinpacken.
  7. Das CSS anpassen (Pfad), kopieren und
  8. in deinem Child-Theme oder unter wp-content (Customizer) einfügen

Ich bevorzuge die Variante Child Theme und eine absolute Pfadangabe im CSS – also: https://dozent.digitalfahrschule.de/fonts/abeezee-v12-latin-….

Google Font serverseitig einbinden

  • die Webadresse ist https://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('https://dozent.digitalfahrschule.de/fonts/abeezee-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('ABeeZee Regular'), local('ABeeZee-Regular'),
       url('https://dozent.digitalfahrschule.de/fonts/abeezee-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://dozent.digitalfahrschule.de/fonts/abeezee-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://dozent.digitalfahrschule.de/fonts/abeezee-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://dozent.digitalfahrschule.de/fonts/abeezee-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://dozent.digitalfahrschule.de/fonts/abeezee-v12-latin-regular.svg#ABeeZee') format('svg'); /* Legacy iOS */
}

Google Fonts serverseitig einbinden

Die jeweilige Klasse im Theme ansprechen

Hier die Überschriften der Seiten/Beiträge:

.entry-title { font-family: 'ABeeZee';}

Google Fonts via Plugin datenschutzkonform einbinden

Wem der Weg zu umständlich ist, und wer noch Platz für ein Plugin hat, dem sei dieses empfohlen (Achtung, die einzelnen Klassen müssen trotzdem über CSS angesprochen werden):

Klicken Sie auf den unteren Button, um den Inhalt von de.wordpress.org zu laden.

Inhalt laden

Google Icons DSGVO-konform nutzen

Was nicht jedem bewußt ist: Du hast über Google Fonts auch Zugriff auf fast 1000 Icons https://fonts.google.com/icons. Diese kannst du, wie die Fonts auch, selber in einem Ordner deiner Wahl hosten. Am Besten in einem Ordner auf der Ebene deines Root-Verzeichnisses, z.B https://domain.de/icons/material-icons.woff – und dann wie gewohnt über CSS in dein Child-Theme einbinden.

Über Google Fonts Icons einbinden

Du siehst hier die Wahlmöglichkeiten auf einen Blick

  1. Icon aussuchen
  2. Icon downloaden
  3. In Ordner auf Root-Ebene deiner Homepage speichern
  4. Adressieren
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://domain.de/icons/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://domain.de/icons/MaterialIcons-Regular.woff2) format('woff2'),
url(https://domain.de/icons/MaterialIcons-Regular.woff) format('woff'),
url(https://domain.de/icons/MaterialIcons-Regular.ttf) format('truetype');
}

und deine jeweiligen Klassen ansprechen:

.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;

/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;

/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;

/* Support for IE. */
font-feature-settings: 'liga';
}

Icons via HTML ansprechen

<span class="material-icons">face</span>

In dem Artikel von Google kannst du noch mal nachlesen, was genau es mit den Material Icons auf sich hat und wie du sie einbindest, anpasst und ansprichst.

https://developers.google.com/fonts/docs/material_icons

Exkurs: Webschriftarten

Derzeit werden vier Formate von Schriftarten im Internet verwendet: EOT, TTF, WOFF und WOFF2. (…), die dir die Homepage von Google, der google-webfonts-helper gesammelt anbietet.

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. (…) Gut ist, WOFF 2.0 für Browser zu liefern, die diese unterstützen.  WOFF passt für die Mehrzahl der Browser.  TTF ist nützlich für alte Android-Browser (vor 4.4), ebenso die EOT für alte IE-Browser (vor IE9).

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

Schriftformate für den Druck, bzw. Desktop installieren

Wenn du übrigens einen Schrifttyp von Google Fons für z.B. Photoshop oder Indesign benötigst (für dein Logo z.B. oder für Photoshop, Indesign, Word, Open Office etc.), kannst du direkt von Google Fonts den jeweiligen Schrifttyp laden und das Zip via Doppelklick auf Mac oder Windows installieren. Nach der Installation kannst du diese Schrift sofort verwenden.

Google Fonts Schriftfamilie für die Installation auf deinem Computer

Schriftfamilie aussuchen und auf deinem Computer speichern

 

 

Schlagwörter:

Ein Gedanke zu „Google Fonts & Icons datenschutzkonform in WordPress einbinden“

  1. Pingback: Hinzufügen einer benutzerdefinierten Schriftart zum Divi-Theme - SEO,WordPress, Jimdo & Co.

Schreibe einen Kommentar

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