O Trocador de Fontes permite substituir qualquer fonte em uma página web por outra da biblioteca Google Fonts — seja globalmente (todo o texto da página) ou por elemento (apenas títulos, apenas texto do corpo ou qualquer elemento específico em que você clicar). As fontes são carregadas dinamicamente sob demanda, e você pode alternar entre as fontes originais e as novas para comparar o impacto na legibilidade e no design.
Escolher a tipografia certa é uma das decisões de design mais impactantes, mas testar fontes no contexto é surpreendentemente difícil. As pré-visualizações do Google Fonts mostram fontes isoladamente com texto de exemplo — não no contexto do layout real da sua página com seu conteúdo real. O Trocador de Fontes traz o Google Fonts diretamente para o navegador, aplicado a páginas reais. Navegue ou pesquise na biblioteca, clique em uma fonte e veja-a aplicada instantaneamente. A fonte é carregada dinamicamente do CDN do Google, portanto, não há necessidade de download ou instalação. Aplique-a globalmente para ver como a página inteira fica com uma nova tipografia, ou clique em elementos específicos para testar diferentes fontes para títulos vs. texto do corpo. Alterne entre a fonte original e a substituta com um clique para comparar a legibilidade, o peso visual e o impacto geral do design. Todas as alterações são não destrutivas — atualize para restaurar tudo.
Aplique uma nova fonte a toda a página com um clique. Cada elemento de texto — títulos, parágrafos, botões, navegação, rodapé — muda para a fonte selecionada. Veja como uma mudança completa de tipografia afeta o design geral imediatamente.
Clique em elementos específicos para alterar apenas a fonte deles. Teste uma fonte serifada para títulos com uma sem serifa para o texto do corpo, ou aplique uma fonte monoespaçada apenas a blocos de código. Misture e combine fontes na mesma página.
Navegue e pesquise na biblioteca completa do Google Fonts (mais de 1.500 famílias de fontes) diretamente na ferramenta. As fontes são carregadas dinamicamente do CDN do Google sob demanda — sem necessidade de instalação local ou downloads.
Alterne entre a fonte original e a substituta com um clique. A página muda instantaneamente, facilitando a comparação de legibilidade, peso visual, altura-x e espaçamento entre as duas tipografias.
Quando você aplica uma nova fonte, os valores originais de peso da fonte (font-weight) e estilo da fonte (font-style) são preservados. Títulos em negrito permanecem em negrito, textos em itálico permanecem em itálico e o texto do corpo de peso leve mantém seu peso leve — a tipografia muda, mas a hierarquia tipográfica é mantida.
Pesquise fontes por nome ou filtre por categoria (serif, sans-serif, display, handwriting, monospace). Encontre a tipografia certa rapidamente entre as mais de 1.500 opções disponíveis.
Começando um novo site? Abra um site semelhante e troque as fontes pelas suas candidatas. Veja como cada tipografia fica com conteúdo real e layout real — muito mais revelador do que a pré-visualização de texto de exemplo do Google Fonts.
Durante uma revisão de design, mostre aos clientes como o site deles ficaria com fontes diferentes. "Aqui está o design atual... e aqui está como ele fica com Playfair Display para os títulos." A alternância ao vivo torna a comparação convincente.
Compare como diferentes fontes afetam a legibilidade de conteúdo longo. Alterne um post de blog entre Inter, Georgia, Lora e Merriweather para encontrar a tipografia mais confortável para ler no tamanho de fonte desejado.
Explorando uma renovação de marca? Aplique novas candidatas de tipografia ao seu site de produção para ver como elas ficariam com seu conteúdo, cores e layout reais. Muito mais rápido do que criar mockups para cada opção.
Teste como diferentes fontes afetam a legibilidade para usuários com dislexia ou deficiências visuais. Fontes como OpenDyslexic, Lexie Readable ou sans-serifs com alta altura-x podem ser aplicadas instantaneamente para verificar seu impacto.
Abra o dock flutuante do DevSuite Pro e clique no ícone Trocador de Fontes. Um painel se abre com uma biblioteca pesquisável do Google Fonts.
Digite o nome de uma fonte para pesquisar ou role pela biblioteca. Filtre por categoria (serif, sans-serif, display, monospace) para restringir as opções.
Clique no nome de uma fonte para aplicá-la globalmente a todo o texto da página. Ou clique primeiro no modo "Por Elemento", depois clique em elementos específicos na página e selecione uma fonte.
Use o botão de alternância para alternar entre a fonte original e a substituta. Compare a legibilidade, o peso visual e o impacto do design lado a lado.
Quando terminar de experimentar, atualize a página para restaurar todas as fontes originais completamente.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 39 ferramentas de desenvolvedor para seu navegador.
