Google Fonts lokal über CSS & den Breakdance Builder einbinden

Knowledge-Base • Datenschutz • Google Fonts lokal über CSS & den Breakdance Builder einbinden
Lesezeit ca: 12 min

Warum Fonts lokal einbinden?

Die Wahl der richtigen Schriftart spielt eine entscheidende Rolle für das Design und die Lesbarkeit deiner Website. In der WordPress-Welt sind Google Fonts aufgrund ihrer Vielfalt und Benutzerfreundlichkeit besonders beliebt.

Allerdings wird das lokale Einbinden von Schriftarten im Hinblick auf Datenschutzbestimmungen wie die DSGVO immer wichtiger. Wenn Schriftarten vom eigenen Server geladen werden, anstatt von Google-Servern, werden keine IP-Adressen der Besucher an Google übermittelt. Dies schützt nicht nur die Privatsphäre der Besucher, sondern kann auch die Ladezeiten deiner Website verbessern, da weniger externe Anfragen nötig sind. 

Google Fonts per CSS lokal einbinden

Diese Methode bietet maximale Kontrolle und Transparenz, erfordert jedoch etwas technisches Verständnis und CSS-Kenntnisse. Sie ist ideal, wenn du deine Website individuell gestalten und auf zusätzliche Plugins verzichten möchtest. 

Google Fonts herunterladen
Besuche die Google Fonts Webseite, wähle die gewünschten Schriftarten aus, und lade diese als ZIP-Datei herunter.

Schriftdateien auf den Server laden
Entpacke die ZIP-Datei. Lade die benötigten Schriftdateien im .woff2-Format (und optional .woff für ältere Browser) in dein WordPress-Verzeichnis hoch. Ein guter Ort dafür ist ein neuer Ordner, z. B. /wp-content/uploads/fonts/. Das .woff2-Format bietet die beste Komprimierung und Performance.

CSS anpassen
Öffne die style.css-Datei deines Themes (am besten über ein Child-Theme oder den Customizer unter „Zusätzliches CSS“) und füge für jede Schriftart und jeden Schriftschnitt eine @font-face-Regel hinzu. Passe ‹CustomFont› und die Pfade entsprechend an:

@font-face { 
/* Wähle einen Namen für deine Schrift */ 
   font-family: 'CustomFont'; 
/* Pfad zur .woff2-Datei und */ 
/* Optional: Pfad zur .woff-Datei für ältere Browser */ 
  src: url('/wp-content/uploads/fonts/custom-font-regular.woff2') format('woff2'), url('/wp-content/uploads/fonts/custom-font-regular.woff') format('woff');    
  font-weight: normal;   
  font-style: normal; 
/* Empfohlen: Lässt Text erst in Fallback-Schrift anzeigen */ 
  font-display: swap; 
} 
 
/* Schriftart global oder für bestimmte Elemente anwenden */ 
body { 
/* 'CustomFont' als primäre Schrift, sans-serif als Fallback */ 
  font-family: 'CustomFont', sans-serif;  
} 
 
h1, h2, h3 { 
  font-family: 'CustomFont', sans-serif; 
  font-weight: bold;
}

Wichtig:
Füge font-display: swap; hinzu. Dies weist den Browser an, den Text zunächst in einer verfügbaren Standardschrift anzuzeigen und erst dann zur Web-Schriftart zu wechseln, sobald diese geladen ist. Das verhindert unsichtbaren Text (FOIT – Flash of Invisible Text) und verbessert die wahrgenommene Ladezeit. 

Preload Fonts: Layoutverschiebungen (CLS) vermeiden  

Sicher hast du schon erlebt, wie sich beim Laden einer Webseite die Schriftart plötzlich ändert oder das Layout «springt». Dieses Phänomen, bekannt als Cumulative Layout Shift (CLS), stört die Nutzererfahrung und tritt auf, wenn Web-Schriftarten verzögert geladen werden. Der Browser zeigt erst eine Standardschrift an und wechselt dann abrupt zur Web-Schriftart, sobald diese verfügbar ist. 

Die Lösung

Durch das Preloading signalisierst du dem Browser, wichtige Ressourcen – in diesem Fall Schriftarten – so früh wie möglich zu laden. Dies ist besonders effektiv bei lokal gehosteten Schriften und hilft, CLS sowie FOIT/FOUT (Flash of Unstyled Text) zu minimieren. 

Wie funktioniert Preloading?

Füge für jede kritische Schriftdatei die sofort sichtbar sein soll, z. B. für Überschriften im sichtbaren Bereich, einen <link>-Tag in den <head>-Bereich deiner Website ein. Dies geht z. B. über die header.php deines Child-Themes oder mithilfe eines Plugins wie «Code Snippets».

<link rel="preload" href="../fonts/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Erklärung der Attribute:

  1. rel="preload"
    Weist den Browser an, die Ressource vorzuladen.
  2. href="../fonts/font.woff2"
    Der Pfad zur Schriftdatei auf Ihrem Server. 
  3. as="font"
    Gibt an, dass es sich um eine Schriftart handelt (wichtig für die Priorisierung). 
  4. type="font/woff2"
    Der MIME-Typ der Schriftart.
  5. crossorigin="anonymous"
    Ist für das Preloading von Schriftarten erforderlich, auch wenn sie lokal gehostet werden, um Kompatibilitätsprobleme zwischen Preload-Cache und CSS-Anfrage zu vermeiden.

Schritte zur Implementierung

  • Wichtigste Schriften identifizieren
    Welche Schriftarten und -schnitte werden sofort beim Laden der Seite sichtbar (z. B. für Navigation, Hauptüberschrift, Fließtext «above the fold»)? Lade nur diese vor, um den initialen Ladevorgang nicht unnötig zu belasten
  • Preload-Link in den <head> einfügen
    Füge die <link>-Tags für die identifizierten Schriftdateien in den <head> deiner Website ein (z. B. via header.php oder Plugin).
  • Testen
    Überprüfe mit dem Dev-Tool Lighthouse des Browser (Chrome) oder Online mit PageSpeed Insights oder GTmetrix, ob die Fonts korrekt vorgeladen werden und keine Verzögerungen auftreten.

Warum Preloading sinnvoll ist?

  • Verbessert den PageSpeed Score
    Reduziert CLS und LCP (Largest Contentful Paint). 
  • Bessere User Experience
    Inhalte werden schneller und ohne störende Ladefehler dargestellt.
  • Effektiv kombinierbar mit lokalem Hosting
    Die Kombination aus lokalem Hosting und Preloading ist optimal für Performance und Datenschutz.

Mit Preloading kannst du sicherstellen, dass deine lokal eingebundenen Schriftarten nicht nur datenschutzfreundlich, sondern auch blitzschnell bereitgestellt und geladen werden. 

Google Fonts lokal einbinden über OMGF

Das Plugin OMGF (Optimize My Google Fonts) st eine leistungsstarke Lösung, um Google Fonts lokal einzubinden, die Ladezeiten zu verbessern und die Einhaltung der DSGVO sicherzustellen. Durch gezielte Optimierungen wie das Nutzen des Browser-Caches, das Reduzieren von DNS-Lookups und die Vermeidung von Cumulative Layout Shift (CLS) wird die Performance deiner WordPress-Seite erheblich gesteigert. 

Wie OMGF deine Website optimiert

  1. Lokales Hosting & Caching
    Lädt verwendete Google Fonts auf deinen Server herunter und bindet sie von dort ein. Browser können die Dateien cachen.
  2. Reduziert DNS-Anfragen
    Da Fonts lokal gehostet werden, entfallen Anfragen an externe Server wie fonts.googleapis.com. Das reduziert Ladezeiten und minimiert die Abhängigkeit von Drittanbietern.
  3. Vermeidet CLS (Cumulative Layout Shift)
    Lokales Hosting stellt sicher, dass Schriftarten frühzeitig verfügbar sind, was Layoutverschiebungen beim Laden der Seite verhindert.
  4. 100% DSGVO-konform
    OMGF sorgt dafür, dass keine Daten mehr an Google-Server übermittelt werden, was insbesondere im Sinne der DSGVO für Websites in der EU wichtig ist.

Schritte zur Umsetzung mit OMGF

  1. Installiere das Plugin
    Gehe zu Plugins > Installieren, suche nach «OMGF”, installiere und aktiviere es.
  2. Fonts automatisch erkennen
    Gehe zu Einstellungen > Optimize Google Fonts. Das Plugin scannt deine Seite automatisch nach genutzten Google Fonts.
  3. Fonts herunterladen & optimieren
    Klicke auf „Speichern & Optimieren“. OMGF lädt die erkannten Schriften herunter und passt die Einbindung auf deiner Website automatisch an.
  4. Testen
    Überprüfe, ob die Schriftarten korrekt angezeigt werden. Kontrolliere in den Browser-Entwicklertools (Netzwerk-Tab), dass keine Anfragen mehr an Google Fonts Server gehen.

Google Fonts lokal über den Breakdance Builder einbinden

Der Breakdance Builder bietet in seiner umfassenden Benutzeroberfläche zur Gestaltung von WordPress-Websites unter anderem auch die Option «Custom Fonts» für das Einbinden lokaler Schriften. 

  1. Breakdance Builder öffnen
    Öffne den Breakdance Builder entweder über ein Template, eine Seite oder in einem Beitrag.
  2. Globale Einstellungen öffnen
    Klicke auf die drei vertikalen Punkte oben rechts (neben «Save») und wähle «Preferences» (Einstellungen). Es öffnet sich ein Modal, in dem du unter «Custom Fonts» die gewünschten Schriftarten hinzufügen und speichern kannst.
  3. Lokale Fonts hochladen
    • Klicke auf «Add Font» (Schriftart hinzufügen). 
    • Vergib einen Namen für die Schriftfamilie (z. B. «Meine Custom Schrift»). 
    • Lade für jeden Schriftschnitt (z. B. Regular, Bold) die entsprechende .woff2-Datei hoch und wähle das passende Gewicht (font-weight) und den Stil (font-style) aus. 
    • Speichere die Einstellungen mit «Save Fonts» (Schriften speichern). 
    • (Alternative: Über «Add External CSS» könntest du auch eine URL zu einer selbst erstellten fonts.css-Datei angeben, die @font-face-Regeln enthält.) 
  4. Schriftart anwenden
    Wähle in den Stiloptionen für Textelemente (z. B. Überschrift, Fließtext) deine hochgeladene Schriftart aus der Liste im Dropdown-Menü aus.

Standard Google Fonts Bibliothek in Breakdance deaktivieren (Optional) 

Standardmäßig lädt Breakdance die Liste aller Google Fonts, was die Auswahl unübersichtlich machen kann, wenn du nur lokale Schriften verwenden möchtest. So deaktivierst du sie. Füge den folgenden Code-Schnipsel in die functions.php deines Child-Themes oder in ein eigenes Code-Snippet-Plugin ein: 

add_filter("breakdance_register_font", function ($font) {

    // disable all Google Fonts
    $isGoogleFont = !!$font['dependencies']['googleFonts'];
    
    if ($isGoogleFont) {
        return false;
    }

    return $font;
});

Welche Methode passt zu dir?

Wenn du maximale Kontrolle über die Einbindung deiner Schriftarten haben möchtest und mit CSS vertraut bist, ist die erste Methode ideal für dich. Für eine unkomplizierte und schnelle Umsetzung bieten sich Plugins wie OMGF an. Verwendest du den Breakdance Builder, kannst du die praktischen, integrierten Funktionen nutzen, um Schriftfamilien ganz ohne zusätzliche Tools oder manuelle CSS-Anpassungen einzubinden.  

Wenn du mehr über optimieren von Schriftarten lesen möchtest, findest du unter «Variable Fonts: Ladezeiten reduzieren & Web Performance verbessern» weitere Informationen zum Thema.

Egal, für welche Methode du dich entscheidest: Das lokale Einbinden von Schriftarten ist ein wichtiger Schritt für besseren Datenschutz und einer leistungsstarken Website. 

Expand Your Knowledge