Gerador de pilha de fallback de fonte
Gere pilhas de famílias de fontes CSS prontas para produção com substitutos de plataforma cruzada adequados. Escolha entre mais de 90 fontes selecionadas do Google em 5 categorias - Sans Serif, Serif, Monospace, Display e Handwriting. Cada categoria vem com várias opções de pilha substituta selecionadas, cobrindo fontes do sistema macOS, Windows, Linux, iOS e Android. Visualize sua pilha ao vivo, copie a declaração CSS, o snippet @import ou qualquer variante da pilha - tudo com um clique. Totalmente gratuito, sem necessidade de inscrição.
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.
Sobre pilhas substitutas de fontes
- Uma pilha de família de fontes é uma lista de fontes separadas por vírgulas em seu CSS. O navegador tenta cada fonte em ordem - se a fonte principal não estiver instalada ou não for carregada, ele volta para a próxima. Uma pilha bem elaborada garante que o texto esteja sempre legível, mesmo quando sua fonte personalizada da web não estiver disponível.
- Esta ferramenta combina a fonte primária escolhida (Google Font ou qualquer nome de fonte personalizado) com listas de substitutos do sistema selecionadas e organizadas por categoria. Cada categoria - Sans Serif, Serif, Monospace, Display e Handwriting - tem múltiplas variantes de pilha, desde básicas (Arial, Helvetica, sans-serif) até abrangentes (fontes do sistema Apple, Segoe UI, Roboto, etc.).
- Mesmo com font-display: swap, há um breve momento em que a fonte substituta é renderizada antes que a fonte personalizada seja carregada. Uma boa pilha substituta com métricas semelhantes (altura x, largura, peso) reduz a mudança cumulativa de layout (CLS) e fornece uma experiência de leitura mais suave. Isso é fundamental para Core Web Vitals.
- Sempre combine a categoria substituta com sua fonte principal. Uma fonte primária serifada deve recorrer às fontes serifadas do sistema, não às sans-serif. Categorias incompatíveis causam mudanças visuais chocantes quando o substituto é renderizado. Esta ferramenta seleciona automaticamente a categoria da fonte principal como categoria substituta padrão.
Perguntas frequentes
Uma pilha de família de fontes é uma lista priorizada de fontes em seu CSS. O navegador tenta usar a primeira fonte; se não estiver disponível ou não carregar, ele tenta o próximo. Isso garante que o texto seja sempre exibido em uma fonte legível, independentemente da fonte instalada pelo usuário.
Esta ferramenta gera pilhas abrangentes e multiplataforma que abrangem macOS, Windows, Linux, iOS, Android e ChromeOS. Escrever manualmente é propenso a erros - você pode esquecer fontes específicas da plataforma ou usar citações incorretas. A ferramenta garante que cada pilha esteja correta e completa.
Cada categoria tem múltiplas variantes. A pilha 1 (recomendada) é a mais abrangente – abrange todos os principais sistemas operacionais com fontes nativas do sistema. A pilha 2 é mais curta para suporte a navegadores mais antigos. Stack 3 é o substituto mínimo seguro para a web. A pilha recomendada é melhor para a maioria dos projetos.
Nomes de fontes contendo espaços (como "Times New Roman") devem ser colocados entre aspas simples ou duplas. Palavras-chave genéricas (serif, sans-serif, monospace, cursive) e fontes do sistema começando com um travessão (como -apple-system) NÃO devem ser citadas. A ferramenta lida com as cotações corretamente.
Sim. Use o seletor de fontes para escolher entre mais de 90 fontes selecionadas do Google ou digite qualquer nome de fonte personalizado na caixa de pesquisa. A ferramenta gera a pilha para qualquer nome de fonte inserido.
Uma pilha de fallback bem combinada reduz a mudança cumulativa de layout (CLS). Quando a fonte substituta tem métricas semelhantes à sua fonte personalizada, o texto não muda quando a fonte personalizada é carregada. Combinado com font-display: swap, isso fornece o melhor equilíbrio entre desempenho e consistência visual.
Sim. Adicione a pilha ao seu tailwind.config.js em theme.extend.fontFamily. Por exemplo: fontFamily: {título: ['Playfair Display', 'Georgia', 'serif'] }. Em seguida, use o cabeçalho da classe de utilitário font-heading em sua marcação.
Sim – os clientes de e-mail suportam poucas fontes. A maioria renderiza apenas fontes seguras para a web, como Arial, Georgia, Times New Roman, Courier e Verdana. Nossas pilhas alternativas básicas Sans Serif e Serif funcionam bem para modelos de e-mail.