Gerador de font stack CSS — Fontes do sistema com fallbacks CJK

O que esta ferramenta faz

O Gerador de font stack CSS monta um valor de font-family pronto para colar, usando fontes que já estão instaladas nos dispositivos dos seus visitantes. Escolha um estilo, como a fonte nativa da interface do sistema, uma neogrotesca como Inter e Helvetica, uma serifa transicional como Charter ou uma monoespaçada boa para código, e a ferramenta lista a melhor fonte de cada plataforma na ordem certa.

As stacks seguem a conhecida coleção Modern Font Stacks, além da stack clássica -apple-system, BlinkMacSystemFont, "Segoe UI" que muitos sites ainda usam. Você pode adicionar fallbacks para texto em chinês simplificado, chinês tradicional, japonês, coreano, árabe, tailandês ou hindi, e fontes de emoji coloridos no final.

Como usar

Escolha uma Font stack. A prévia à esquerda mostra como ela fica no dispositivo que você está usando agora; você pode editar o texto para testar suas próprias palavras.
Escolha Fontes para outras escritas se as suas páginas têm texto em chinês, japonês, coreano, árabe, tailandês ou hindi.
Ative ou desative Adicionar fontes de emoji.
Escolha uma Saída: uma declaração font-family simples, uma custom property CSS, uma entrada fontFamily do Tailwind ou uma lista simples.
Copie o resultado ou baixe-o como arquivo .css.

Nomes que têm espaços ou começam com um dígito ganham aspas automaticamente; palavras-chave CSS como system-ui e sans-serif nunca ficam entre aspas, porque isso as transformaria em nomes de fontes que não existem.

Exemplo

UI do sistema com fallbacks para chinês simplificado:

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

Dicas

Use uma stack para o texto do corpo e uma stack monoespaçada para o código: duas stacks de sistema não custam nada para carregar.
A prévia depende das fontes instaladas no seu próprio dispositivo, então confira a página também no Windows e em um celular.
Se depois você adicionar uma web font, coloque-a em primeiro lugar na lista e mantenha a stack do sistema como fallback.

Perguntas frequentes

› O que é uma font stack?

Uma lista de famílias de fontes na propriedade CSS font-family. O navegador usa a primeira fonte instalada no dispositivo e recorre à seguinte quando ela não existe, terminando em uma família genérica como sans-serif.

› Por que adicionar fontes chinesas, japonesas ou coreanas?

Fontes ocidentais como Inter ou Charter não têm glifos CJK. Listar PingFang SC, Microsoft YaHei ou Noto Sans SC antes da família genérica faz o texto em chinês usar uma fonte que combina com o estilo, em vez de qualquer uma que o sistema escolher. O mesmo vale para árabe, tailandês e hindi (devanágari). Russo, ucraniano, grego, vietnamita, turco, polonês e outros idiomas de alfabeto latino ou cirílico não precisam de nada extra: as fontes do sistema e as Noto de cada stack já cobrem esses idiomas.

› Por que as fontes de emoji ficam depois de sans-serif?

Fontes de emoji só cobrem emojis. Colocá-las por último garante que letras e números comuns nunca sejam renderizados em uma fonte de emoji, enquanto os emojis continuam com glifos coloridos em todas as plataformas.

› Essas stacks precisam baixar web fonts?

Não. Todas as stacks usam fontes que já vêm com Windows, macOS, iOS, Android ou distribuições Linux comuns, então as páginas carregam sem nenhuma requisição de fonte.