Was dieses Tool macht
Der CSS-Font-Stack-Generator erstellt einen sofort einfügbaren font-family-Wert aus Schriften, die auf den Geräten deiner Besucher bereits installiert sind. Wähle einen Stil – etwa die native System-UI-Schrift, eine Neo-Grotesk wie Inter und Helvetica, eine Barock-Antiqua wie Charter oder eine codetaugliche Monospace-Schrift – und das Tool listet die beste Schrift jeder Plattform in der richtigen Reihenfolge auf.
Die Stacks folgen der bekannten Sammlung Modern Font Stacks, ergänzt um den klassischen Stack -apple-system, BlinkMacSystemFont, "Segoe UI", den viele Websites noch nutzen. Du kannst Fallbacks für vereinfachtes Chinesisch, traditionelles Chinesisch, Japanisch, Koreanisch, Arabisch, Thailändisch oder Hindi hinzufügen und am Ende farbige Emoji-Schriften anhängen.
So funktioniert es
- Wähle einen Font-Stack. Die Vorschau links zeigt, wie er auf dem Gerät aussieht, das du gerade verwendest; du kannst ihren Text bearbeiten, um eigene Wörter auszuprobieren.
- Wähle Schriften für weitere Schriftsysteme, wenn deine Seiten chinesischen, japanischen, koreanischen, arabischen, thailändischen oder Hindi-Text enthalten.
- Schalte Emoji-Schriften hinzufügen ein oder aus.
- Wähle eine Ausgabe: eine einfache
font-family-Deklaration, eine CSS Custom Property, einen Tailwind-fontFamily-Eintrag oder eine einfache Liste. - Kopiere das Ergebnis oder lade es als
.css-Datei herunter.
Namen mit Leerzeichen oder einer Ziffer am Anfang werden automatisch in Anführungszeichen gesetzt; CSS-Schlüsselwörter wie system-ui und sans-serif dagegen nie, denn mit Anführungszeichen würden sie zu Schriftnamen, die es nicht gibt.
Beispiel
System-UI mit Fallbacks für vereinfachtes Chinesisch:
font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";Tipps
- Verwende einen Stack für Fließtext und einen Monospace-Stack für Code: Zwei System-Stacks kosten keine Ladezeit.
- Die Vorschau hängt von den Schriften auf deinem eigenen Gerät ab – prüfe die Seite also auch unter Windows und auf einem Smartphone.
- Wenn du später einen Webfont hinzufügst, setze ihn an den Anfang der Liste und behalte den System-Stack als Fallback.
FAQ
› Was ist ein Font-Stack?
Eine Liste von Schriftfamilien in der CSS-Eigenschaft font-family. Der Browser verwendet die erste Schrift, die auf dem Gerät installiert ist, und fällt sonst auf die nächste zurück – am Ende steht eine generische Familie wie sans-serif.
› Warum chinesische, japanische oder koreanische Schriften hinzufügen?
Westliche Schriften wie Inter oder Charter enthalten keine CJK-Glyphen. Stehen PingFang SC, Microsoft YaHei oder Noto Sans SC vor der generischen Familie, nutzt chinesischer Text eine stilistisch passende Schrift statt irgendeiner, die das System auswählt. Dasselbe gilt für Arabisch, Thailändisch und Hindi (Devanagari). Russisch, Ukrainisch, Griechisch, Vietnamesisch, Türkisch, Polnisch und andere Sprachen mit lateinischer oder kyrillischer Schrift brauchen nichts weiter: Die System- und Noto-Schriften in jedem Stack decken sie bereits ab.
› Warum stehen die Emoji-Schriften nach sans-serif?
Emoji-Schriften decken nur Emojis ab. Stehen sie ganz am Ende, werden normale Buchstaben und Ziffern nie in einer Emoji-Schrift dargestellt, während Emojis trotzdem auf jeder Plattform farbige Glyphen bekommen.
› Müssen für diese Stacks Webfonts heruntergeladen werden?
Nein. Jeder Stack verwendet Schriften, die mit Windows, macOS, iOS, Android oder gängigen Linux-Distributionen ausgeliefert werden – Seiten laden also ohne eine einzige Font-Anfrage.