CSS font stack generator — systeemfontstacks met CJK-fallbacks

Wat deze tool doet

De CSS font stack generator maakt een kant-en-klare font-family-waarde van fonts die al op de apparaten van je bezoekers staan. Kies een stijl, zoals het native systeem-UI-font, een neo-grotesk zoals Inter en Helvetica, een overgangsschreef zoals Charter of een monospace die geschikt is voor code, en de tool zet het beste font per platform in de juiste volgorde.

De stacks volgen de bekende Modern Font Stacks-collectie, plus de klassieke -apple-system, BlinkMacSystemFont, "Segoe UI"-stack die veel sites nog gebruiken. Je kunt fallbacks toevoegen voor Vereenvoudigd Chinees, Traditioneel Chinees, Japans, Koreaans, Arabisch, Thai of Hindi, en kleuren-emojifonts aan het eind.

Zo gebruik je het

Kies een Font stack. Het voorbeeld links laat zien hoe die eruitziet op het apparaat dat je nu gebruikt; je kunt de tekst aanpassen om je eigen woorden te proberen.
Kies Fonts voor andere schriften als je pagina’s Chinese, Japanse, Koreaanse, Arabische, Thaise of Hindi-tekst bevatten.
Zet Emoji-fonts toevoegen aan of uit.
Kies een Uitvoer: een gewone font-family-declaratie, een CSS custom property, een Tailwind fontFamily-item of een gewone lijst.
Kopieer het resultaat of download het als .css-bestand.

Namen met spaties of die met een cijfer beginnen krijgen automatisch aanhalingstekens; CSS-sleutelwoorden zoals system-ui en sans-serif nooit, omdat ze met aanhalingstekens lettertypenamen worden die niet bestaan.

Voorbeeld

System UI met fallbacks voor Vereenvoudigd Chinees:

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";

Tips

Gebruik één stack voor lopende tekst en een monospace-stack voor code: twee systeemstacks kosten niets om te laden.
Het voorbeeld hangt af van de fonts op je eigen apparaat, dus controleer de pagina ook op Windows en op een telefoon.
Voeg je later een webfont toe, zet die dan vooraan in de lijst en houd de systeemstack als fallback.

Veelgestelde vragen

› Wat is een font stack?

Een lijst met lettertypefamilies in de CSS-eigenschap font-family. De browser gebruikt het eerste lettertype dat op het apparaat geïnstalleerd is en valt anders terug op het volgende, met aan het eind een generieke familie zoals sans-serif.

› Waarom Chinese, Japanse of Koreaanse fonts toevoegen?

Westerse fonts zoals Inter of Charter hebben geen CJK-tekens. Door PingFang SC, Microsoft YaHei of Noto Sans SC vóór de generieke familie te zetten, gebruikt Chinese tekst een font dat bij de stijl past in plaats van wat het systeem toevallig kiest. Hetzelfde geldt voor Arabisch, Thai en Hindi (Devanagari). Russisch, Oekraïens, Grieks, Vietnamees, Turks, Pools en andere talen met het Latijnse of cyrillische schrift hebben niets extra nodig: de systeem- en Noto-fonts in elke stack dekken ze al.

› Waarom staan emoji-fonts na sans-serif?

Emoji-fonts bevatten alleen emoji. Door ze achteraan te zetten worden gewone letters en cijfers nooit in een emoji-font weergegeven, terwijl emoji op elk platform toch in kleur verschijnen.

› Moeten er voor deze stacks webfonts gedownload worden?

Nee. Elke stack gebruikt fonts die meegeleverd worden met Windows, macOS, iOS, Android of gangbare Linux-distributies, dus pagina's laden zonder één fontverzoek.