Visualizador de fontes

• Pré-visualize qualquer Google Font na hora: nosso visualizador carrega as Google Fonts sob demanda e renderiza seu texto em tempo real. Digite qualquer texto, escolha entre mais de 80 fontes e veja exatamente como fica em qualquer tamanho e peso, sem recarregar a página.
• Copie o CSS e o @import com um clique: nosso visualizador gera a declaração CSS font-family completa e a URL @import do Google Fonts para a fonte, o tamanho e o peso selecionados. Copie qualquer uma das duas com um clique e cole direto na sua folha de estilos.
• Visualizador de fontes online seguro: nosso visualizador roda inteiramente no seu navegador - as fontes são carregadas direto do CDN do Google Fonts e seu texto de pré-visualização nunca sai do seu dispositivo. Nenhum dado é enviado a servidor algum.
• Visualizador de fontes sem instalação, 100% grátis: use nosso visualizador direto em qualquer navegador, sem downloads, conta ou anúncios. Explore mais de 80 Google Fonts em 5 categorias - Sans Serif, Serif, Display, Monospace e Handwriting - totalmente grátis para sempre.

• Design web e de interface: designers usam nosso visualizador para avaliar Google Fonts em projetos web antes de se decidir. Pré-visualize seu título ou corpo de texto real em várias fontes lado a lado para achar o encaixe tipográfico perfeito.
• Identidade de marca e design de logotipo: use nosso visualizador para testar fontes display e serif em nomes de marca, slogans e conceitos de logotipo. Veja como seu texto de marca fica em Bebas Neue, Playfair Display ou Cinzel antes de escolher.
• Desenvolvimento frontend: desenvolvedores frontend usam nosso visualizador para achar rapidamente a Google Font certa e copiar a URL @import e a declaração CSS. Pule o site do Google Fonts e obtenha o código que precisa em segundos.
• Design de conteúdo e blogs: criadores de conteúdo e blogueiros usam nosso visualizador para escolher fontes de corpo legíveis e fontes de título chamativas. Pré-visualize o título real do seu artigo ou um parágrafo em Merriweather, Lora ou Spectral.
• Design de apresentações e documentos: use nosso visualizador para achar fontes que funcionem bem em apresentações, relatórios e documentos. Pré-visualize o título do slide ou o texto de corpo em pesos diferentes para garantir legibilidade em qualquer tamanho.
• Aprender tipografia: estudantes e desenvolvedores que aprendem tipografia usam nosso visualizador para entender como cada categoria de fonte se parece e se comporta. Compare fontes Sans Serif, Serif, Display e Monospace lado a lado.

Um visualizador de fontes permite digitar texto próprio e vê-lo renderizado em diferentes tipos de letra antes de escolher um para seu projeto. Nosso visualizador foca em Google Fonts - uma biblioteca de fontes gratuita e de código aberto com mais de 1.500 tipos usados por milhões de sites. Em vez de navegar pelo site do Google Fonts e adivinhar como uma fonte fica com seu conteúdo real, nosso visualizador deixa você digitar seu título, corpo de texto ou nome de marca e ver na hora o resultado em qualquer uma das mais de 80 Google Fonts populares de cinco categorias: Sans Serif, Serif, Display, Monospace e Handwriting.

1. Digite seu texto de pré-visualização: insira qualquer texto no campo de pré-visualização - seu título real, corpo de texto, nome de marca ou o clássico pangrama «The quick brown fox». A pré-visualização é atualizada na hora conforme você digita.
2. Explore e selecione uma fonte: busque pelo nome ou filtre por categoria. Clique em qualquer fonte da lista para selecioná-la - ela é carregada direto do CDN do Google Fonts e renderizada no seu navegador. Ajuste tamanho e peso com os controles para ver exatamente como a fonte fica no seu caso de uso.
3. Copie o CSS: depois de achar a fonte certa, copie com um clique a declaração CSS font-family ou a URL @import do Google Fonts. Cole o @import na sua folha de estilos e o font-family nas suas regras CSS.

• Sans Serif: fontes limpas e modernas sem traços decorativos - ideais para corpo de texto, interfaces e telas. Exemplos: Inter, Roboto, Poppins, Montserrat. As melhores para legibilidade em telas.
• Serif: fontes com pequenos traços decorativos nas extremidades dos caracteres - clássicas e com autoridade. Exemplos: Playfair Display, Merriweather, Lora. As melhores para editorial, impresso e leitura de textos longos.
• Display: fontes decorativas e expressivas criadas para títulos grandes e impacto visual. Exemplos: Bebas Neue, Anton, Pacifico. As melhores para manchetes, logotipos e textos curtos de exibição.
• Monospace: fontes de largura fixa em que cada caractere ocupa o mesmo espaço horizontal. Exemplos: JetBrains Mono, Fira Code, Source Code Pro. As melhores para código, terminais e conteúdo técnico.

Copie a URL @import do nosso visualizador de fontes e cole no topo do seu arquivo CSS. Depois use a declaração font-family nas suas regras CSS. Em projetos Next.js, use o pacote next/font/google para desempenho ideal - ele auto-hospeda a fonte automaticamente e elimina a requisição de rede externa. Em projetos HTML simples, adicione a tag <link> no seu <head> em vez do @import para melhor desempenho.