Porque fontes locais dependem do sistema operacional, da instalação do usuário e do suporte a glifos. Se a família principal não existir no aparelho, o navegador usa o fallback e a aparência muda.
Carregando ferramenta… / Loading tool…
Teste famílias, fallback, peso, tamanho, estilo e espaçamento com texto real.
Escrever font-family não garante que a fonte vai aparecer: a propriedade é uma lista de prioridades, e o navegador escolhe a primeira família que exista no dispositivo e tenha o glifo de cada caractere. Se a fonte principal não estiver instalada, ou não cobrir um acento, ele desce na lista até o fallback genérico. Por isso um preview honesto precisa testar o texto real do seu produto, com acentos, números e pontuação, e não uma amostra idealizada. Esta ferramenta mostra a renderização ao vivo e gera o CSS da stack para você validar antes de publicar a interface.
A stack font-family: "Inter", system-ui, sans-serif funciona como um plano B em cadeia: o navegador tenta Inter; se não existir, usa a fonte de interface do sistema (system-ui); se ainda faltar, cai no genérico sans-serif, que sempre resolve para alguma fonte sem serifa disponível. Terminar a lista com um genérico (serif, sans-serif, monospace, cursive) é o que garante uma escolha previsível.
A troca pode acontecer até dentro da mesma palavra: se a fonte principal não tiver o glifo de um caractere, um acento, um símbolo, um ideograma,, só aquele caractere usa o fallback, enquanto o resto mantém a fonte principal. Por isso testar com texto real revela quebras que uma amostra em inglês esconderia.
Exemplo 1, cobertura de acentos: digite "Ação, coração, R$ 1.234,56" e observe se ã, ç, ó e o cifrão saem na mesma fonte do resto. Se algum caractere "pular" para outro desenho, a fonte principal não cobre aquele glifo em PT-BR, um problema comum com fontes gratuitas de conjunto reduzido.
Exemplo 2, pesos disponíveis: compare peso 400 e 700 e depois um intermediário como 500. Se o 500 parecer só um 400 mais escuro artificialmente, o navegador pode estar sintetizando um peso que a fonte não traz de verdade, o que muda a aparência e a nitidez.
Há duas rotas para uma fonte chegar à página: usar fontes já instaladas no sistema (rápidas, mas variáveis por dispositivo) ou carregar uma fonte web via @font-face (consistente, mas com custo de download). Esta ferramenta foca as fontes disponíveis no sistema e a montagem da stack, sem exigir upload de arquivos.
Ao publicar uma fonte web, lembre que só existem os pesos e estilos que você realmente carregar: pedir font-weight: 500 sem ter esse arquivo faz o navegador aproximar ou engordar o traço artificialmente. Carregar apenas os pesos usados mantém a página leve e evita surpresas de renderização.
Cole o código no seu HTML e a ferramenta aparece na sua página, sem a navegação e sem os anúncios do J-Kit. Ela continua rodando no navegador de quem visita o seu site.
<iframe
src="https://jkit.tools/embed/pt-BR/visualizador-fontes"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Visualizador de Fontes"
></iframe>Estas referências ajudam a contextualizar fórmulas, padrões, APIs e limitações usadas nesta página. Elas não substituem validação profissional quando o resultado tiver impacto jurídico, financeiro, médico ou operacional.
Porque fontes locais dependem do sistema operacional, da instalação do usuário e do suporte a glifos. Se a família principal não existir no aparelho, o navegador usa o fallback e a aparência muda.
font-family: Inter, sans-serif;
font-size: 48px;
font-weight: 500;
font-style: normal;
letter-spacing: 0px;O texto e a família são renderizados localmente no navegador.