Explore um diretório selecionado de Google Fonts populares com pré-visualizações em direto, filtre por categoria e pesquise por nome, depois copie CSS pronto a colar e explore emparelhamentos de tipos de letra sugeridos — tudo no seu browser.

Tamanho 34px

Tudo corre no seu browser — os tipos de letra são carregados a partir do Google Fonts apenas para pré-visualização em direto, nada é enviado, sem registo, totalmente gratuito.


Sobre Emparelhamento de Tipos de Letra e Diretório Google Fonts

Este diretório de fontes reúne 80 Google Fonts populares numa única página pesquisável, cada uma apresentada como uma amostra ao vivo com uma linha pangrama, uma linha de alfabeto e numerais, e um selo de categoria. Cobre cinco famílias tipográficas — sem serifa, com serifa, display, manuscrita e monoespaçada — para que possa comparar formas de letra reais em vez de adivinhar pelos nomes.

Cada cartão de fonte inclui sugestões de combinação selecionadas: fontes parceiras que funcionam bem em conjunto para títulos e corpo de texto. Clicar numa combinação abre uma pré-visualização que define um título numa fonte e um parágrafo noutra, para que possa avaliar a combinação em contexto antes de se comprometer com ela.

Quando uma fonte ou combinação é adequada, um clique copia CSS pronto a colar — uma linha @import para a folha de estilos do Google Fonts, mais a pilha font-family correspondente com uma reserva sensata. As fontes são carregadas do Google Fonts apenas para as pré-visualizações ao vivo; nada do que escreve é enviado para lado nenhum.

Como usar Emparelhamento de Tipos de Letra e Diretório Google Fonts

  1. Percorra os cartões de fonte, cada um mostrando o seu nome, selo de categoria e texto de amostra ao vivo definido no tipo de letra real.
  2. Use a caixa de pesquisa para encontrar uma fonte pelo nome, ou clique num selo de categoria (Sem serifa, Com serifa, Display, Manuscrita, Monoespaçada) para filtrar a grelha.
  3. Arraste o cursor de tamanho (16–72 px) para pré-visualizar a linha de amostra no tamanho de título ou corpo de texto pretendido.
  4. Clique num selo "Combina com" ou no botão "Pré-visualizar combinação" para ver um título e um parágrafo de corpo definidos na combinação sugerida.
  5. Clique no botão "CSS" num cartão ou na pré-visualização de combinação para copiar a linha @import e as declarações font-family para a área de transferência.

Perguntas frequentes

Apresenta um conjunto selecionado de 80 Google Fonts amplamente usadas, distribuídas por cinco categorias: sem serifa, com serifa, display, manuscrita e monoespaçada. Cada selo de categoria mostra uma contagem ao vivo, para que possa ver quantas fontes correspondem ao seu filtro atual.

Cada fonte lista uma ou duas fontes parceiras escolhidas a dedo que contrastam bem com ela — normalmente uma fonte display ou com serifa para títulos combinada com uma fonte de corpo legível. A pré-visualização de combinação mostra as funções exatas de título e corpo para cada combinação.

Para uma única fonte, obtém uma linha @import url() para o endpoint css2 do Google Fonts (pesos regular e negrito) mais uma pilha font-family com a reserva genérica correta. Para uma combinação, obtém ambas as importações e declarações separadas para títulos e corpo.

Sim, as pré-visualizações ao vivo carregam os tipos de letra a partir da CDN do Google Fonts — esse é o único pedido externo da página. As suas pesquisas, escolhas de filtro e CSS copiado permanecem no seu navegador; nada é enviado ou guardado.

Sim, navegar, pré-visualizar combinações e copiar CSS são todos gratuitos, sem necessidade de conta. Os tipos de letra listados são Google Fonts, que são por sua vez gratuitos para uso em projetos pessoais e comerciais ao abrigo das suas licenças abertas.

Pode ajustar o tamanho da amostra entre 16 px e 72 px com o cursor de tamanho, que atualiza todos os cartões de uma vez. Isso facilita a comparação de candidatas no tamanho exato que planeia usar para títulos ou corpo de texto.

Precisa de ajuda?
Encontrou um problema com esta ferramenta? Avise a nossa equipa.
Relatar um problema

Adicione esta ferramenta gratuita ao seu próprio site — copie e cole o código abaixo.