Wenn man auf einer Website Google-Fonts benutzt, ist es eine gute Idee, die Fonts nicht über den Google-Server zu laden, sondern lokal einzubinden. Das ist datenschutzkonform, weil damit die Schriften nicht bei jedem Aufruf nach Hause telefonieren.

Für diese Aufgabe kann man ein Plugin einsetzen. Im Plugin-Verzeichnis gibt es einige Plugins, die Google-Fonts herunterladen: Dieses hier oder das hier.

Ich persönlich finde ein Plugin nicht so richtig praktisch. Es gibt zu viele Fälle, bei denen die Einbindung aus unbekannten Gründen nicht klappt und dann geht’s irgendwie nicht weiter.

Es ist aber relativ einfach, die Schriften direkt über das CSS einzubinden. Dafür gibt es praktische Helfer-Tools. Ich habe lange den Webfont-Generator von fontsquirrel.com genutzt. Der wäre auch nach wie vor meine erste Wahl, wenn es um freie Schriften geht, die nicht von Google stammen.

Für Google-Fonts habe ich inzwischen google-webfonts-helper.herokuapp.com für mich entdeckt. Damit geht es super schnell, die Site bereitet alles fix und fertig vor.

Google-Font einbinden in 4 Schritten

  1. Font auf google-webfonts-helper.herokuapp.com aussuchen
  2. Schrift-Dateien herunterladen, zip-Archiv entpacken
  3. Im Theme-Verzeichnis ein Verzeichnis ‚fonts‘ anlegen und die Schriftdateien da reinkopieren – nur die Dateien, nicht die Verzeichnisse
  4. CSS-Schnipsel (Beispiel siehe unten) in die style.css eintragen.
  5. Fertig!

Hier ein Beispiel für die Schrift „Noto sans“.

/* noto-sans-regular - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/noto-sans-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans'), local('NotoSans'),
       url('./fonts/noto-sans-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/noto-sans-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/noto-sans-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('./fonts/noto-sans-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/noto-sans-v9-latin-regular.svg#NotoSans') format('svg'); /* Legacy iOS */
}

Die Schriften kannst du dann so einem Element zuweisen:

p {font-family 'Noto Sans';}