Developer Tools
Text ToolsFerramenta de Pré-visualização de Fontes
Visualize qualquer fonte do Google com texto personalizado, tamanho, peso e cor. Gere código CSS de importação instantaneamente. Ferramenta gratuita online.
Fontes Populares
Style
Browser Support
Style Tags
216 fonts
Pré-visualização ao Vivo
The quick brown fox jumps over the lazy dog
Pré-visualização de Fonte
Nome da Fonte:Roboto
Tamanho da Fonte:32px
Peso da Fonte:400
Código CSS
CSS font-family:
font-family: 'Roboto', sans-serif;URL de Importação do Google Fonts:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap');Full CSS snippet
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 32px;
color: #1e293b;
}Ferramentas Relacionadas
Sobre a Ferramenta de Pré-visualização de Fontes
Como Funciona
- Insira qualquer nome de família do Google Fonts ou escolha da lista popular
- A fonte é carregada dinamicamente via API do Google Fonts no seu navegador
- Ajuste peso, tamanho, cor e fundo para ver sua configuração ideal
- Copie a declaração CSS font-family ou a URL de importação para seu projeto
- Alterne entre textos de amostra predefinidos ou insira texto personalizado
Casos de Uso Comuns
- Escolher a tipografia certa para um novo projeto web
- Comparar como diferentes pesos da mesma fonte ficam em vários tamanhos
- Gerar o trecho CSS correto para importar uma fonte do Google
- Demonstrar opções de fonte para clientes sem sair do navegador
- Verificar a renderização de números e símbolos para dashboards
Perguntas Frequentes
O que é a Ferramenta de Pré-visualização de Fontes?
A Ferramenta de Pré-visualização de Fontes permite que você carregue qualquer família de fontes do Google Fonts, ajuste seu peso, tamanho, cor e fundo, visualize com texto personalizado e copie o código CSS de importação, tudo diretamente no seu navegador.
Como visualizar uma fonte do Google?
Digite o nome da fonte do Google (por exemplo, 'Playfair Display') na caixa de pesquisa e clique em 'Carregar Fonte', ou clique em qualquer nome da lista de fontes populares.
Posso usar qualquer fonte do Google?
Sim. Você pode digitar o nome exato de qualquer fonte disponível no Google Fonts. A ferramenta constrói a URL correta automaticamente e carrega todos os pesos disponíveis (100–900).
Quais pesos de fonte são suportados?
A ferramenta solicita pesos de 100 a 900 do Google Fonts. Se uma fonte não inclui um peso específico, o navegador renderizará o peso mais próximo disponível.
Como copiar o código CSS para meu projeto?
Após carregar a fonte, vá para a seção de Código CSS no painel direito. Use os botões de cópia ao lado de cada trecho para copiar a declaração font-family, a URL @import ou o bloco CSS completo.
Quais textos de amostra estão disponíveis?
Seis predefinições são fornecidas: Pangrama, Alfabeto, Números e Símbolos, Lorem Ipsum, exemplo de Título e exemplo de Parágrafo. Você também pode digitar seu próprio texto personalizado.
Esta ferramenta armazena dados?
Não. A Ferramenta de Pré-visualização de Fontes é totalmente baseada no navegador. Carrega fontes através da API pública do Google Fonts e não armazena nada em nenhum servidor.
Posso alterar a cor do texto e o fundo?
Sim. Use os seletores de cor na seção Cores para escolher qualquer cor hexadecimal para o texto e o fundo da pré-visualização. Isso é útil para verificar taxas de contraste.
Por que o carregamento de uma fonte falha?
O carregamento pode falhar se o nome da fonte estiver com erro de digitação, se a fonte foi removida do Google Fonts, ou se sua rede bloquear solicitações para fonts.googleapis.com.
Esta ferramenta é gratuita?
Sim, a Ferramenta de Pré-visualização de Fontes é completamente gratuita. As fontes são servidas pelo CDN do Google Fonts sob licenças de código aberto.
Posso comparar várias fontes lado a lado?
Você pode alternar rapidamente entre fontes usando os chips de Fontes Populares. Para uma comparação formal, abra a ferramenta em duas abas do navegador com fontes diferentes carregadas.
O que é uma declaração CSS font-family?
Uma declaração CSS font-family diz ao navegador qual tipografia usar, com fontes de fallback. Exemplo: font-family: 'Roboto', sans-serif;