Font-Fallback-Stack-Generator
Generieren Sie produktionsbereite CSS-Schriftfamilienstapel mit geeigneten plattformübergreifenden Fallbacks. Wählen Sie aus über 90 kuratierten Google-Schriftarten in 5 Kategorien – Sans Serif, Serif, Monospace, Display und Handschrift. Jede Kategorie verfügt über mehrere kuratierte Fallback-Stack-Optionen für macOS-, Windows-, Linux-, iOS- und Android-Systemschriftarten. Sehen Sie sich Ihren Stack live an, kopieren Sie die CSS-Deklaration, das @import-Snippet oder eine beliebige Stack-Variante – alles mit einem Klick. Völlig kostenlos, keine Anmeldung erforderlich.
Select a primary font and a fallback category to generate your CSS font-family stack.
Or switch to "Quick Presets" for ready-to-use recommendations.
Über Font-Fallback-Stacks
- Ein Schriftfamilienstapel ist eine durch Kommas getrennte Liste von Schriftarten in Ihrem CSS. Der Browser probiert jede Schriftart der Reihe nach aus. Wenn die primäre Schriftart nicht installiert ist oder nicht geladen werden kann, greift er auf die nächste zurück. Ein gut gestalteter Stapel stellt sicher, dass der Text immer lesbar ist, auch wenn Ihre benutzerdefinierte Webschriftart nicht verfügbar ist.
- Dieses Tool kombiniert die von Ihnen gewählte primäre Schriftart (Google Font oder ein beliebiger benutzerdefinierter Schriftartname) mit kuratierten System-Fallback-Listen, die nach Kategorien geordnet sind. Jede Kategorie – Sans Serif, Serif, Monospace, Display und Handwriting – verfügt über mehrere Stapelvarianten von einfach (Arial, Helvetica, serifenlos) bis umfassend (Apple-Systemschriftarten, Segoe UI, Roboto usw.).
- Auch bei „font-display: swap“ gibt es einen kurzen Moment, in dem die Fallback-Schriftart gerendert wird, bevor die benutzerdefinierte Schriftart geladen wird. Ein guter Fallback-Stack mit ähnlichen Metriken (x-Höhe, Breite, Gewicht) reduziert den Cumulative Layout Shift (CLS) und sorgt für ein flüssigeres Leseerlebnis. Dies ist für Core Web Vitals von entscheidender Bedeutung.
- Ordnen Sie die Fallback-Kategorie immer Ihrer primären Schriftart zu. Eine primäre Serifenschrift sollte auf Serifen-Systemschriftarten zurückgreifen, nicht auf serifenlose Schriftarten. Nicht übereinstimmende Kategorien führen beim Rendern des Fallbacks zu störenden visuellen Verschiebungen. Dieses Tool wählt automatisch die Kategorie der primären Schriftart als Standard-Fallback-Kategorie aus.
Häufig gestellte Fragen
Ein Schriftfamilienstapel ist eine priorisierte Liste von Schriftarten in Ihrem CSS. Der Browser versucht, die erste Schriftart zu verwenden; Wenn es nicht verfügbar ist oder nicht geladen werden kann, wird es mit dem nächsten versucht. Dadurch wird sichergestellt, dass Text immer in einer lesbaren Schriftart angezeigt wird, unabhängig davon, was der Benutzer installiert hat.
Dieses Tool generiert umfassende, plattformübergreifende Stacks für macOS, Windows, Linux, iOS, Android und ChromeOS. Das manuelle Schreiben ist fehleranfällig – Sie vergessen möglicherweise plattformspezifische Schriftarten oder verwenden falsche Anführungszeichen. Das Tool stellt sicher, dass jeder Stapel korrekt und vollständig ist.
Jede Kategorie hat mehrere Varianten. Stack 1 (empfohlen) ist der umfassendste – er deckt alle wichtigen Betriebssysteme mit systemnativen Schriftarten ab. Stack 2 ist für die Unterstützung älterer Browser kürzer. Stack 3 ist der minimale websichere Fallback. Der empfohlene Stapel eignet sich für die meisten Projekte am besten.
Schriftartnamen, die Leerzeichen enthalten (wie „Times New Roman“), müssen in einfache oder doppelte Anführungszeichen gesetzt werden. Generische Schlüsselwörter (Serif, Sans-Serif, Monospace, Kursivschrift) und Systemschriftarten, die mit einem Bindestrich beginnen (wie -apple-system), dürfen NICHT in Anführungszeichen gesetzt werden. Das Tool verarbeitet Angebote korrekt.
Ja. Verwenden Sie die Schriftartenauswahl, um aus über 90 kuratierten Google-Schriftarten auszuwählen, oder geben Sie einen beliebigen benutzerdefinierten Schriftartennamen in das Suchfeld ein. Das Tool generiert den Stapel für jeden von Ihnen eingegebenen Schriftartnamen.
Ein gut abgestimmter Fallback-Stack reduziert den Cumulative Layout Shift (CLS). Wenn die Ersatzschriftart ähnliche Messwerte wie Ihre benutzerdefinierte Schriftart aufweist, verschiebt sich der Text beim Laden der benutzerdefinierten Schriftart nicht. In Kombination mit „font-display: swap“ bietet dies die beste Balance zwischen Leistung und visueller Konsistenz.
Ja. Fügen Sie den Stack zu Ihrer tailwind.config.js unter theme.extend.fontFamily hinzu. Zum Beispiel: FontFamily: { Überschrift: ['Playfair Display', 'Georgia', 'serif'] }. Verwenden Sie dann die Schriftartenüberschrift der Utility-Klasse in Ihrem Markup.
Ja – E-Mail-Clients unterstützen nur sehr wenige Schriftarten. Die meisten rendern nur websichere Schriftarten wie Arial, Georgia, Times New Roman, Courier und Verdana. Unsere Sans Serif- und Serif-Basic-Fallback-Stacks eignen sich gut für E-Mail-Vorlagen.