Testar Fontes e Pares

Pré-visualizar pares de Google Fonts, espaçamento e estilos.

Configuração de tipografia

Fonte do título

Fonte do corpo

Tamanho do título36px

Peso do título

Tamanho do corpo16px

Peso do corpo

Combinações populares

Tech modernoPoppins + InterEditorial clássicoPlayfair Display + LoraCorporativo ousadoMontserrat + Open SansMonoespaçado limpoJetBrains Mono + RobotoNotícias acolhedorasMerriweather + Lato

Exportar código CSS

/* CSS Integration */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lora:wght@400;700&display=swap');

h1.custom-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 36px;
}

p.custom-body {
  font-family: 'Lora', serif;
  font-weight: 400;
  font-size: 16px;
}

Como funciona

Escolha fontes do Google Fonts para combinar e pré-visualizar.
Digite seu próprio texto na pré-visualização ao vivo e editável.
Ajuste tamanho, peso e espaçamento para testar a tipografia.
Exporte o CSS para usar a combinação no seu projeto.

Para que serve

Testar uma combinação de fonte de título/corpo antes de decidir.
Pré-visualizar como um texto real fica numa fonte.
Obter o CSS para incorporar uma combinação do Google Fonts.

Bom saber

Ele carrega fontes do Google Fonts, então pré-visualizar uma fonte a busca no Google (o único ponto em que esta ferramenta não é totalmente offline).
A renderização pode variar levemente entre sistemas operacionais e navegadores.

Perguntas frequentes

Ele usa o meu próprio texto?

Sim — a pré-visualização é editável, então você pode colar títulos e parágrafos reais em vez de texto de espaço reservado.

Posso obter o CSS?

Sim — ele exporta o CSS para incorporar a combinação escolhida do Google Fonts no seu site.

Isto é totalmente offline?

Quase — tudo roda no seu navegador, mas pré-visualizar uma fonte do Google busca o arquivo da fonte no Google. Nenhum texto que você digitar é enviado.

Ferramentas relacionadas

Visualizador de DXF

Paleta de Cores

Conversor de Cores

Gerador de Box Shadow CSS

Verificador de Contraste