Gerador de CSS do Google Fonts

• Geração instantânea de CSS do Google Fonts: selecione qualquer combinação de Google Fonts e pesos e obtenha na hora um @import ou uma tag prontos para usar. Nosso gerador atualiza a saída em tempo real - sem espera e sem etapas de build.
• Gerador de CSS do Google Fonts online seguro: toda a geração acontece localmente no seu navegador - suas seleções de fontes e os detalhes do projeto nunca saem do seu dispositivo. Use nosso gerador online com total privacidade.
• Gerador de CSS do Google Fonts sem instalação: gere @import e tags do Google Fonts direto em qualquer navegador, sem Node.js, npm ou ferramentas de build. Funciona em qualquer dispositivo, em qualquer lugar - basta selecionar e copiar.
• Estratégia font-display e pré-visualização ao vivo: escolha entre as estratégias font-display swap, optional, fallback, block ou auto para desempenho de carregamento ideal. Veja uma pré-visualização ao vivo de cada fonte renderizada no navegador antes de adicioná-la ao projeto.

• Tipografia de aplicações web: desenvolvedores frontend usam nosso gerador para configurar rapidamente a tipografia de apps React, Vue e Angular. Selecione a família de fontes, escolha os pesos necessários e cole o @import gerado no seu arquivo CSS global.
• Design de landing pages: designers e profissionais de marketing usam nosso gerador para combinar uma fonte display com uma fonte de corpo em landing pages. Carregue uma predefinição como «Editorial Blog» ou «Creative Portfolio» e tenha a tag pronta em segundos.
• Projetos Next.js e Gatsby: desenvolvedores de Next.js e Gatsby usam nosso gerador para obter a sintaxe @import correta para a folha de estilos global ou o _document.tsx. O CSS gerado é compatível com qualquer framework baseado em React.
• Carregamento de fontes otimizado: desenvolvedores atentos ao desempenho usam nosso gerador para escolher a estratégia font-display: swap ou optional, minimizando o deslocamento de layout e melhorando as notas de Core Web Vitals dos seus sites.
• Desenvolvimento de templates de e-mail: desenvolvedores de e-mail usam nosso gerador para obter a sintaxe @import correta em templates HTML. Selecione apenas os pesos necessários para manter a URL de importação curta e de carregamento rápido.
• Configuração de design systems: engenheiros de design system usam nosso gerador para documentar as famílias de fontes, os pesos e as estratégias de exibição exatas usadas em um produto. O trecho CSS gerado passa a fazer parte da documentação do design system.

Um gerador de CSS do Google Fonts é uma ferramenta que constrói a URL @import ou a tag <link> correta para carregar Google Fonts em um projeto web. O Google Fonts serve gratuitamente mais de 1.400 famílias de fontes pelo seu CDN, mas montar a URL correta da API - especialmente ao combinar várias fontes, pesos e variantes itálicas - exige entender a sintaxe da API CSS2 do Google Fonts. Nosso gerador cuida de tudo automaticamente: selecione suas fontes e pesos, escolha uma estratégia font-display e obtenha a URL correta na hora. Sem precisar montar manualmente tuplas de eixos ital,wght@ nem memorizar o formato dos parâmetros da API.

1. 1. Selecione suas fontes: escolha entre mais de 40 Google Fonts populares organizadas por categoria (sans-serif, serif, monospace, handwriting, display). Carregue uma predefinição como «Modern SaaS» ou «Editorial Blog» para começar na hora, ou adicione fontes individualmente.
2. 2. Escolha pesos e estilos: selecione os pesos específicos (100-900) e as variantes itálicas que você precisa. Carregue apenas os pesos que realmente usa - cada peso adicional aumenta o tempo de carregamento. A pré-visualização ao vivo mostra cada fonte renderizada no navegador.
3. 3. Copie ou baixe: copie para a área de transferência o @import ou a tag <link> gerados, ou baixe-os como arquivo .css. A saída também inclui declarações CSS font-family prontas para usar para cada fonte selecionada.

• URL @import (CSS): uma instrução @import url('...') para usar no topo de um arquivo CSS ou dentro de uma tag <style>. É a forma mais simples de carregar Google Fonts em um fluxo de trabalho centrado em CSS.
• Tag <link> (HTML): um par de tags <link rel="preconnect"> mais a tag principal <link rel="stylesheet"> para usar no <head> de um documento HTML. As dicas preconnect melhoram o desempenho de carregamento ao estabelecer conexões antecipadas com os servidores do Google.
• Declarações CSS font-family: regras CSS font-family prontas para usar para cada fonte selecionada, incluindo a pilha de fontes alternativas do sistema correta para a categoria (sans-serif, serif, monospace, etc.).
• Estratégia font-display: o parâmetro display= acrescentado à URL do Google Fonts controla como o navegador lida com o período de carregamento da fonte. swap é recomendado para a maioria dos sites, pois mostra uma fonte alternativa imediatamente e troca para a fonte web quando carregada, evitando texto invisível.

• swap (recomendada): mostra uma fonte alternativa imediatamente e depois troca para a fonte web quando ela carrega. A melhor para corpo de texto e títulos em que texto invisível prejudicaria a experiência.
• optional: usa a fonte web apenas se ela carregar dentro de uma janela muito curta (normalmente 100 ms). A melhor para sites críticos em desempenho, em que o carregamento de fontes não deve afetar as métricas.
• fallback: período de bloqueio curto (100 ms) e depois período de troca (3 segundos). Um meio-termo entre swap e optional.
• block: esconde o texto até a fonte carregar (até 3 segundos). Evite para corpo de texto - pode causar texto invisível (FOIT) e prejudicar os Core Web Vitals.