Google Fonts lokal einbinden

Natürlich kann man auch alternative Fonts benutzen. Manchmal besteht der Kunde jedoch auf eine bestimmte Schriftart.

1. Google Fonts ermitteln.

Quelltext (im Browser: Strg + U)

Admin → Design → Customizer

Entwicklerconsole des Browsers (Firefox: Rechte Maustaste → Untersuchen → Console: Suchbegriff »Fonts«, Chrome: rechts auf die vertikalen 3 Punkte → weitere Tools → Entwicklertools)

2. Google Fonts downloaden.

3. Mit Google Webfonts Helper die notwendigen Dateien erstellen.
https://google-webfonts-helper.herokuapp.com/fonts
Hier werden der CSS-Code und die dazugehörigen Dateien für die Einbindung erstellt.

Beispiel

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

4. Dateien hochladen und CSS anpassen

5. Google Fonts deaktivieren (Plugin)

6. CSS-Cache löschen

7. Tests

In der Entwicklerkonsole des Browser nachsehen, woher die Fonts geladen werden.