7 Monaten her

Allgemein, Elementor, Google, WordPress

Google Fonts lokal einbinden

04/10/2022

Author:

PetyaKostova

Google Fonts lokal einbinden – so geht es sicher

Anleitung

Schritt für Schritt

1

Scan

Einfach über den Browser im Entwicklermodus scannen.

2

Alle Schriften

Alle Schriften(Schrift Familien) finden und herunterladen

3

Konvertieren

Die Schriften in die 5 Web Fonts konvertieren und herunterladen.

TTF / EOT / WOFF / WOFF2 / SVG

4

Hochladen

Alle Formate Ihrer Schrift in das definierte Verzeichnis hochladen.

5

In WordPress

In WordPress einloggen. Dashboard > Elementor > Custom Fonts > Add New. Bitte laden sie die ganze Familie mit alle 5 Formaten hoch. 

6

Child Theme

Sind Sie sicher, dass Sie eine Child Theme benutzen.

Dashboard > Design > Themes

7

Google Fonts

Fonts und Google Fonts in den Theme > Optionen 

Meistens unter Einstellungen – Design / Typography 

8

CSS

Mit dem Code-Editor CSS auf deiner Website anpassen. Binden Sie den Code in die style.css

9

Testen (Schritt 1)

Sie fragen, wir antworten

  1. Benutzte Google Fonts herausfinden.
  2. Benötigte Google Fonts herunterladen.
  3. Google Fonts auf deinen Server hochladen.
  4. CSS auf deiner Website anpassen.
  5. Verbindung zu Google Fonts deaktivieren.
  6. Prüfe, ob alle Google Fonts lokal geladen werden.
  • DSGVO 
  • Serverlast vergrößert sich.
  • Ladezeiten der Seiten werden etwas länger
  • Auch webfähige Fonts lasen sich konvertieren und binden.

Alternativ gibt es Plugins, die man zum deaktivieren externe Fonts benutzen können.

Ich empfehle die Plugin-Nutzung  um die Verbindung zum Google Server zu trennen. z.B. Disable and Remove Google Fonts