Google Fonts: Erneut eine Abmahnwelle

Google Fonts werden in den meisten Fällen direkt in das HTML Dokument mit einem <link>-Tag eingebunden oder per @import-Anweisung in einer CSS Datei. In folgendem Beispiel möchten wir die Schriftart "Roboto" in eine Website einbinden:

Beispiel mit einem <link>-Tag:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Beispiel mit einer @import-Anweisung:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

In beiden Fällen rufen Sie die Adresse der Google Font im Browser auf. (Im Beispiel ist es die URL: https://fonts.googleapis.com/css2?family=Roboto&display=swap)

Danach sehen Sie den CSS Code der die Schriftart in die Website integriert: (Wir haben für dieses Beispiel den CSS Code von sieben auf eine Anweisung reduziert)

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

Im Beispiel wird die URL "https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2" aufgerufen. Die Datei mit dem kryptischen Namen "KFOmCnqEu92Fr1Mu72xKOzY.woff2" ist dabei die Schriftart. Da wir die Schriftart auf unseren Server legen möchten, rufen wir die URL im Browser auf und laden somit automatisch die Schriftart auf unseren Rechner. Jetzt laden wir diese Datei auf unseren Server bzw. auf unser Hostingpaket hoch. (Der Dateiname darf dabei gerne umbenannt werden)

Im nächsten Schritt kopieren wir die CSS Anweisungen in unsere lokale CSS-Datei der Website und ändern die src-Regeln im @font-face. Hierbei setzen wir die URL auf den Pfad in dem wir die Schriftart hochgeladen haben, z.B.:

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/css/fonts/roboto/roboto-regular.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

Als letzten Schritt entfernen wir noch die Codeschnipsel mit denen wir vorher die Schrift über Google eingebunden hatten. Somit haben wir die Google Font "lokal" eingebunden.

In WordPress gibt es durch eine Vielzahl an Plugins auch sehr Möglichkeiten wie Google Fonts integriert wurden. Eine pauschale Lösung für alle Fälle gibt es nicht. Sollten Sie sich nicht sicher sein, wie Google Fonts in Ihrem WordPress eingebunden wurden, wenden Sie sich bitte an uns.

1. Falls Sie einen Builder oder Theme wie z.B. "ProPhoto" oder "Enfold" benutzen, können Sie Google Fonts in den Einstellungen deaktivieren bzw. löschen und Ihre eigenen Schriftarten im System hochladen.
2. Falls Sie ein Standard WordPress Theme wie z.B. TwentySeventeen verwenden, können Sie Google Fonts mit folgendem Code deaktivieren
   
   

   add_action('wp_print_styles', 'twentyseventeen_dequeue_styles', 100);
   
   function twentyseventeen_dequeue_styles() {
   wp_dequeue_style( 'twentyseventeen-fonts' );
   }

3. Mithilfe von Plugins wie "Disable Google Fonts" oder "Borlabs Font Blocker" können Sie ganz einfach Google Fonts deaktivieren. Problem dabei ist: Diese Methode geht nur bei den Standard Themes wie z.B. TwentySeventeen oder ähnlich funktionierenden Themes.

Bei den Schritten 2. und 3. bitte daran denken die gewünschte Schriftart lokal hochzuladen und in der eigenen CSS Datei einzubinden. Bei beiden Schritten werden Schriftarten nur deaktiviert bzw. nicht mehr eingebunden. (sh. Lokales einbinden von Google Fonts)