Shopify-Schriftoptimierung: Reparieren Sie Rendering-blockierende Schriftarten in 5 Schritten

Die schnellste Lösung für Render-blockierende Schriftarten

Bevor Sie sich mit der manuellen Schriftoptimierung befassen, gibt es einen einfacheren Weg. Thunder Page Speed Optimizer kümmert sich automatisch um die Optimierung des Ladens von Schriftarten – es sind keine Änderungen am Theme-Code erforderlich:

• Verzögert das Herunterladen unkritischer Schriftarten, damit das Rendern nicht blockiert wird
• Gilt optimal Schriftartenanzeige -Verhalten für sofortige Textsichtbarkeit
• Verwaltet neben allen anderen Ressourcen auch die Priorität beim Laden von Schriftarten
• Funktioniert mit jedem Shopify-Theme – Dawn, Debut, benutzerdefiniert oder maßgeschneidert

Händler sehen in der Regel eine Geschwindigkeitsverbesserung von mehr als 27 Punkten, die auch die Schriftartenoptimierung als Teil des Pakets beinhaltet. Pläne beginnen bei 19,99 $/Monat mit einer kostenlosen Testversion. Testen Sie kostenlos die Geschwindigkeit Ihres Shops , um zu sehen, wie sich Schriftarten derzeit auf Ihre Ergebnisse auswirken.

Warum Web-Schriftarten das Rendern auf Shopify blockieren

Wenn Ihr Shopify-Shop eine Webschriftart lädt, folgt der Browser einem bestimmten Prozess, der zu einem Rendering-Engpass führt:

1. Der Browser analysiert HTML und stößt auf ein CSS @font-face -Regel
2. Der Browser erkennt, dass er eine Schriftartendatei benötigt, die nicht lokal zwischengespeichert ist
3. Der Browser initiiert einen Download der Schriftartendatei (50–150 KB pro Gewicht).
4. Der Browser verbirgt den gesamten Text, der diese Schriftart verwendet, bis der Download abgeschlossen ist
5. Nach dem Herunterladen rendert der Browser den Text – was zu einem sichtbaren „Flash“ führt.

Dieser Schritt 4 ist das Problem. Bei einer 3G-Mobilfunkverbindung kann das Herunterladen einer 120-KB-Schriftart 1–3 Sekunden dauern. Während dieser gesamten Zeit bleiben Ihre Überschrift, Ihre Produkttitel und Ihr Fließtext erhalten unsichtbar. Benutzer sehen eine leere Seite mit Bildern, aber ohne lesbaren Text.

Dieser unsichtbare Text heißt FOIT – Flash of Invisible Text. Es tut dir direkt weh Größter Contentful Paint (LCP) -Punktzahl, da das größte Textelement erst gemessen werden kann, wenn die Schriftart geladen ist. Es kann auch verursachen Kumulative Layoutverschiebung (CLS) , wenn die Fallback-Schriftart zur Web-Schriftart wechselt und der Text umfließt.

Wie umfangreich sind Shopify-Theme-Schriftarten?

Die meisten Shopify-Themes laden mehr Schriftartendaten, als Händler erkennen:

Die letzte Reihe? Wir sehen es regelmäßig. Shops laden Google Fonts mit mehreren Familien sowie einer benutzerdefinierten Markenschriftart und einer Symbolschriftart. Jede Datei ist eine separate HTTP-Anfrage, die das Rendern blockiert.

Fix Nr. 1: Verwenden Sie die Schriftartanzeige, um unsichtbaren Text zu stoppen

Die wirkungsvollste Schriftartenoptimierung ist das Hinzufügen Schriftartenanzeige: tauschen zu Ihrem @font-face -Erklärungen. Dadurch wird dem Browser mitgeteilt: „Zeigen Sie Text sofort mit einer Systemschriftart an und ersetzen Sie dann die Webschriftart, wenn sie bereit ist.“

/* Before — browser hides text until font loads */
@font-face {
  font-family: 'MyBrandFont';
  src: url('/fonts/mybrandfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* After — text visible immediately, swaps when ready */
@font-face {
  font-family: 'MyBrandFont';
  src: url('/fonts/mybrandfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;  /* ← This one line fixes FOIT */
}

Font-Display-Werte erklärt

Wo kann man in Shopify die Schriftartanzeige hinzufügen?

In den meisten Shopify-Themes werden Schriftarten in der CSS-Datei des Themes oder in der deklariert theme.liquid -Layout. So finden und beheben Sie sie:

1. Gehe zu Online-Shop → Themen → Code bearbeiten
2. Suchen nach @font-face über alle Dateien hinweg (überprüfen base.css, theme.css, und theme.liquid)
3. Hinzufügen Schriftartenanzeige: swap; zu jedem @font-face -Block
4. Wenn Sie Google Fonts über eine URL verwenden, fügen Sie hinzu &display=swap zum URL-Parameter

<!-- Google Fonts: add &display=swap -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

Fix Nr. 2: Laden Sie Ihre wichtigste Schriftart vorab

Auch mit Schriftartenanzeige: tauschen, es gibt immer noch eine Verzögerung, bevor die Webschriftart den Fallback ersetzt. Durch das Vorladen von Schriftarten wird der Browser angewiesen, mit dem Herunterladen der Schriftartdatei zu beginnen sofort – bevor das CSS überhaupt analysiert wird.

<!-- Add to theme.liquid <head> section -->
<link rel="preload" 
      href="{{ 'mybrandfont-regular.woff2' | asset_url }}" 
      as="font" 
      type="font/woff2" 
      crossorigin="anonymous">

Durch das Vorabladen Ihrer primären Textkörperschrift wird die Verzögerung beim Schriftwechsel normalerweise um 200–500 ms reduziert, da der Browser den Download während der HTML-Analyse startet, anstatt zu warten, bis er auf die CSS-Regel stößt. Weitere Informationen zur Funktionsweise von Preload, Preconnect und Prefetch bei Shopify finden Sie in unserem Leitfaden mit Ressourcenhinweisen.

Fix Nr. 3: Schriftarten unterteilen, um nicht verwendete Zeichen zu entfernen

Eine Standard-Webschriftart enthält Glyphen für Latein, erweitertes Latein, Kyrillisch, Griechisch, Vietnamesisch und verschiedene Symbole – über 600 Zeichen. Wenn Ihr Shopify-Shop auf Englisch ist, benötigen Sie weniger als 100 dieser Zeichen.

Durch die Unterteilung von Schriftarten werden die nicht verwendeten Glyphen entfernt, wodurch die Dateigröße drastisch reduziert wird:

So unterteilen Sie Schriftarten

Wenn Sie Google Fonts verwenden, erfolgt die Unterteilung automatisch, wenn Sie die Standard-Einbettungs-URL verwenden – Google stellt nur die Zeichenuntergruppen bereit, die der Browser benötigt. Verwenden Sie für selbst gehostete Schriftarten die folgenden Ansätze:

Option 1: Google Webfonts Helper (am einfachsten)

1. Besuch Google Webfonts Helper
2. Suchen Sie nach Ihrer Schriftart
3. Wählen Sie nur die Zeichensätze aus, die Sie benötigen (normalerweise „Latein“)
4. Wählen Sie nur die Gewichte aus, die Sie verwenden
5. Laden Sie die optimierten WOFF2-Dateien herunter
6. Laden Sie es in Ihr Shopify-Theme hoch Vermögenswerte Ordner

Option 2: pyftsubset (für benutzerdefinierte Schriftarten)

# Install fonttools
pip install fonttools brotli

# Subset to Latin characters only
pyftsubset MyFont.ttf \
  --output-file=MyFont-subset.woff2 \
  --flavor=woff2 \
  --layout-features='kern,liga' \
  --unicodes="U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD"

Option 3: Unicode-Bereich in CSS (Teilmenge auf Browserebene)

Auch ohne Unterteilung auf Dateiebene können Sie dem Browser mitteilen, welche Zeichen eine Schriftartdatei abdeckt. Der Browser lädt die Datei dann nur herunter, wenn diese Zeichen auf der Seite erscheinen:

@font-face {
  font-family: 'MyBrandFont';
  src: url('mybrandfont-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                 U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

Fix Nr. 4: Konvertieren in das WOFF2-Format

WOFF2 ist das am stärksten komprimierte Web-Font-Format und bietet 30–50 % kleinere Dateien im Vergleich zu WOFF und über 70 % kleiner als TTF/OTF. Jeder moderne Browser unterstützt WOFF2 (über 98 % weltweite Unterstützung).

Überprüfen Sie Ihr Shopify-Theme auf Schriftdateien in älteren Formaten:

• .ttf / .otf – Unkomprimiert, 2-3x größer als WOFF2. Sofort konvertieren.
• .woff – Komprimierter, aber älterer Algorithmus. WOFF2 ist 20–30 % kleiner.
• .eot – Nur IE-Format. Komplett entfernen – IE ist tot.
• .woff2 — Bereits optimal. So belassen, wie es ist.

Viele Shopify-Themes enthalten aus Kompatibilitätsgründen immer noch Fallback-Schriftformate. Im Jahr 2026 können Sie WOFF2-only bedenkenlos verwenden und die zusätzlichen Dateidownloads vermeiden:

/* Old approach (unnecessary in 2026) */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.eot');
  src: url('myfont.eot?#iefix') format('embedded-opentype'),
       url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}

/* Modern approach — WOFF2 only */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

Fix Nr. 5: Schriftstärken und -familien reduzieren

Jede Schriftstärke ist ein separater Dateidownload. Die schnellste Optimierung ist oft die einfachste: verwendet weniger Schriftarten.

Überprüfen Sie Ihre aktuelle Schriftartenverwendung

Öffnen Sie Ihren Shop in Chrome DevTools (F12) → Registerkarte „Netzwerk“ → Filtern Sie nach „Schriftart“. Sie sehen jede geladene Schriftartdatei. Gemeinsame Erkenntnisse:

• Unbenutzte Gewichte werden geladen – Theme lädt 300, 400, 500, 600, 700, 800 Gewichte, verwendet aber nur 400 und 700. Entfernen Sie den Rest.
• Kursive Varianten, die niemand verwendet – Laden Sie keine kursiven Schriftartdateien, es sei denn, Ihr Design verwendet ausdrücklich kursiven Text.
• Doppelte Schriftfamilien – Einige Themes laden sowohl die von Shopify gehostete Schriftart als auch eine Google Fonts-Version derselben Schriftart.
• Symbolschriftarten — If you only use 10 icons from Font Awesome (180KB), switch to inline SVGs instead.

Das praktische Minimum

Für die meisten Shopify-Shops benötigen Sie:

• Textkörper: 1 Schriftart, 2 Strichstärken (normal 400 + fett 700)
• Überschriften: Gleiche Schriftart oder 1 zusätzliche Schriftart, 1 Schriftstärke (fett oder halbfett)
• Gesamt: 2-3 Schriftartdateien = 30-60 KB

Das ist es. Drei Schriftartdateien, die Ihr gesamtes Design abdecken. Vergleichen Sie das mit den 8–12 Dateien, die viele Geschäfte laden – Sie können die Schriftartenlast um 70 % reduzieren, indem Sie einfach das entfernen, was Sie nicht wirklich verwenden.

Selbsthostende Schriftarten im Vergleich zu Google Fonts auf Shopify

Google Fonts is convenient, but self-hosting your fonts from Shopify's CDN is faster for two reasons:

1. Keine zusätzliche DNS-Suche – Laden von Schriftarten.googleapis.com Der Ordner requires a DNS lookup + TLS connection to Google's servers. Self-hosting from your theme's Vermögenswerte verwendet das CDN von Shopify, zu dem Ihr Browser bereits eine Verbindung hat.
2. Kein renderblockierendes CSS – Die Google-Schriftarten Das Tag <link> lädt eine CSS-Datei, die das Rendern blockiert. Selbst gehostet @font-face -Deklarationen können direkt in Ihr Theme-CSS eingefügt werden, wodurch eine zusätzliche Anfrage entfällt.

So hosten Sie Google Fonts selbst auf Shopify

1. Verwendung Google Webfonts Helper zum Herunterladen von WOFF2-Dateien
2. Laden Sie Schriftartdateien zu Ihrem Theme hoch Vermögenswerte Ordner
3. Entfernen Sie die Google Fonts <link> ab theme.liquid
4. Hinzufügen @font-face -Deklarationen mit dem Asset-URL-Filter von Shopify

Dadurch werden 2-3 Netzwerkanfragen (DNS + CSS + Schriftartenumleitung) eliminiert und eine Rendering-blockierende Ressource entfernt. In Kombination mit dem Vorladen können selbst gehostete Schriftarten 300–500 ms schneller geladen werden als Google Fonts. Weitere Optimierungen auf CSS-Ebene finden Sie in unserem Shopify CSS-Optimierungsleitfaden.

Variable Schriftarten: Eine Datei für alle Schriftstärken

Variable Schriftarten sind ein neueres Format, das alle Strichstärken (und manchmal auch Breiten und Stile) in einer einzigen Datei packt. Anstatt separate Dateien für Normalschrift, Halbfettschrift und Fettschrift zu laden, erledigt eine Datei mit variablen Schriftarten alles.

Variable Schriftarten sind besonders wertvoll, wenn Sie 3+ Strichstärken derselben Familie verwenden. Die einzelne HTTP-Anfrage ist oft schneller als das Herunterladen mehrerer kleinerer Dateien, insbesondere bei mobilen Verbindungen mit hoher Latenz.

@font-face {
  font-family: 'Inter';
  src: url('inter-variable-latin.woff2') format('woff2-variations');
  font-weight: 100 900;  /* Supports all weights */
  font-style: normal;
  font-display: swap;
}

Die beliebtesten Google Fonts bieten jetzt variable Schriftartenversionen. Überprüfen fonts.google.com und Filter für die Unterstützung variabler Schriftarten.

Reduzieren Sie CLS mit Fallback Font Matching

Bei Verwendung Schriftartenanzeige: tauschen: Der Browser zeigt den Text zunächst in einer System-Fallback-Schriftart an und wechselt dann zu Ihrer Webschriftart. Wenn die beiden Schriftarten unterschiedliche Größen haben, führt der Austausch dazu, dass der Text umfließt, wodurch sich das Layout verschiebt und Ihr Text beeinträchtigt wird CLS-Score.

Die Lösung: CSS verwenden Größenanpassung, Aufstiegsüberbrückung, und Abstiegsüberbrückung Mit den , damit Ihre Fallback-Schriftart so genau wie möglich an die Abmessungen der Web-Schriftart angepasst ist:

/* Create a size-adjusted fallback that matches Inter */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* Use both in your font stack */
body {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
}

Werkzeuge wie Fallback-Schriftgenerator calculate the exact override values for any web font + fallback combination. This technique can reduce font-swap CLS from 0.05-0.15 down to near zero.

Ersetzen Sie Symbolschriftarten durch SVGs

Font Awesome, Material Icons und ähnliche Symbolschriftarten sind einer der schlimmsten Übeltäter für das Aufblähen von Schriftarten. Eine typische Symbolschriftart enthält mehr als 700 Symbole mit einer Größe von 150–300 KB – die meisten Geschäfte verwenden jedoch nur 10–20 davon.

Ersetzen Sie Symbolschriftarten durch Inline-SVGs:

• Größenersparnis: 10 Inline-SVG-Symbole = ~5 KB vs. 180 KB Symbolschriftdatei
• Keine Renderblockierung: SVGs werden sofort mit dem HTML gerendert – kein Herunterladen von Schriftarten erforderlich
• Kein FOIT: Symbole sind beim ersten Malen sichtbar, nicht nachdem eine Schriftart geladen wurde
• Bessere Zugänglichkeit: SVGs können richtig sein Arienbezeichnung Attribute

Die meisten modernen Shopify-Themes (Dawn, Sense, Craft) verwenden bereits Inline-SVGs anstelle von Symbolschriftarten. Wenn Ihr Theme immer noch eine Symbolschriftbibliothek lädt, ist der Wechsel zu SVGs eine der wirkungsvollsten Optimierungen, die Sie vornehmen können. Überprüfen Sie, ob Ihr Theme geladen wird renderblockierende Ressourcen wie Icon-Font-CSS-Dateien.

Checkliste zur Shopify-Schriftoptimierung

Gehen Sie diese Checkliste durch, um Schriftarten in Ihrem Shopify-Shop vollständig zu optimieren:

Nach der Implementierung dieser Änderungen, Führen Sie einen weiteren Geschwindigkeitstest durch zur Messung der Verbesserung. Typische Ergebnisse: 200–800 ms schnelleres LCP und eine messbare Reduzierung des CLS. Für eine vollständige Annäherung an Shopify-Geschwindigkeitsoptimierung, Schriftarten sind daneben ein Puzzleteil Bilder, Skripte von Drittanbietern, und renderblockierendes CSS.

Häufig gestellte Fragen

-Schriftarten sind ein Geschwindigkeitsgewinn, der kaum zu erkennen ist

Die Schriftartenoptimierung von Shopify ist eine der am häufigsten übersehenen Leistungsverbesserungen. Die meisten Geschäfte laden 4–8 Schriftartendateien mit einer Gesamtgröße von 200–400 KB, während sie nur 2–3 Dateien mit 30–60 KB benötigen. Da Schriftarten das Rendern blockieren, wirkt sich dies direkt auf Ihren LCP-Score und das sichtbare Ladeerlebnis für Kunden aus.

Der manuelle Ansatz funktioniert: hinzufügen Schriftartenanzeige: tauschen, Teilmenge von WOFF2, Selbsthost und Vorladen. Wenn Sie die Codeänderungen jedoch lieber überspringen möchten, Thunder Page Speed Optimizer übernimmt die Schriftartenoptimierung als Teil seiner automatischen Geschwindigkeitsverbesserungen – neben Skriptverzögerung, kritischem CSS und mehr.

Beginnen Sie damit, zu messen, wo Sie stehen. Führen Sie Ihren kostenlosen Shopify-Geschwindigkeitstest durch und prüfen Sie, wie sich Schriftarten auf Ihre Leistung auswirken. Gehen Sie dann die obige Checkliste durch oder installieren Sie Thunder und überlassen Sie ihm die schwere Arbeit. Einen umfassenden Ansatz finden Sie in unserem beste Geschwindigkeitsoptimierungs-Apps für 2026.