toolsmoah

Visualizador de Fontes do Google

Pesquise e visualize as Fontes do Google. Encontre a fonte perfeita para seus projetos web e veja como elas ficam em tempo real.

Pesquisa de Fontes
Pesquise ou filtre as fontes desejadas.

Selecione uma fonte para começar a visualizar

📚 Guia Completo de Fontes do Google

Aprenda a usar efetivamente as Fontes do Google

🎨🎨 O que é o Google Fonts?

O Google Fonts é um serviço gratuito de fontes da web fornecido pelo Google.

  • Mais de 1.400 famílias de fontes de código aberto
  • Licença gratuita para uso comercial
  • Distribuição global via CDN rápida
  • Suporte para vários idiomas e sistemas de escrita
  • Otimizado para design responsivo da web

⚡⚡ Como Usar Fontes da Web

1. Usando em HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

2. Aplicando em CSS

body {
  font-family: 'Noto Sans KR', sans-serif;
}

🚀🚀 Dicas de Otimização de Desempenho

  • Use font-display: swap para evitar FOIT
  • Use preconnect para reduzir o tempo de busca de DNS
  • Carregue seletivamente apenas os pesos de fonte necessários
  • Limite os conjuntos de caracteres com o parâmetro subset
  • Configure fallbacks de fontes locais

Exemplo de carregamento otimizado:

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap&subset=korean" rel="stylesheet">

📱📱 Tipografia Responsiva

Configurações para legibilidade ideal em vários dispositivos:

/* 반응형 폰트 크기 */
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
  line-height: 1.6;
}

/* 디바이스별 폰트 스택 */
.font-stack {
  font-family: 
    'Noto Sans KR', 
    -apple-system, 
    BlinkMacSystemFont, 
    'Segoe UI', 
    sans-serif;
}
  • 모바일: 16px 이상 권장
  • 태블릿: 18px 이상 권장
  • 데스크톱: 20px 이상 권장

🎯🎯 Guia de Seleção de Fontes

Fontes recomendadas por uso:

  • Texto do corpo: Noto Sans KR, Spoqa Han Sans
  • Títulos: Noto Serif KR, Gowun Dodum
  • Código: Fira Code, JetBrains Mono
  • Decorativo: Jua, Gamja Flower

Critérios de seleção:

  • Consistência com a identidade da marca
  • Legibilidade e acessibilidade
  • Gama de suporte a vários idiomas
  • Desempenho de carregamento

🔧🔧 Uso Avançado

Usando Fontes Variáveis:

/* Variable Font 로드 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* 동적 weight 조절 */
.dynamic-weight {
  font-family: 'Inter', sans-serif;
  font-weight: var(--font-weight, 400);
  font-variation-settings: 'wght' var(--font-weight, 400);
}

Usando Propriedades Personalizadas CSS:

:root {
  --font-primary: 'Noto Sans KR', sans-serif;
  --font-heading: 'Noto Serif KR', serif;
  --font-mono: 'Fira Code', monospace;
}

h1, h2, h3 { font-family: var(--font-heading); }
body { font-family: var(--font-primary); }
code { font-family: var(--font-mono); }

🛡️🛡️ Considerações de Acessibilidade

  • Taxa de contraste suficiente: WCAG 4.5:1 ou superior
  • Espaçamento de linha adequado: 1.4~1.6 recomendado
  • Tamanho de fonte legível: mínimo 16px
  • Amigável para dislexia: considere OpenDyslexic etc.

Exemplo de CSS acessível:

.accessible-text {
  font-size: max(16px, 1rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-spacing: 0.1em;
}

🔍🔍 Depuração e Teste

Verificação de carregamento de fonte:

  • Verifique os arquivos de fonte na guia Rede das Ferramentas de Desenvolvedor
  • Verifique as fontes realmente aplicadas nos estilos Computados
  • Teste o comportamento de font-display

Ferramentas de medição de desempenho:

  • Google PageSpeed Insights
  • WebPageTest
  • Verificações de otimização de fontes do Lighthouse

폰트 fallback 테스트:

/* 네트워크 차단 시 fallback 확인 */
font-family: 'Custom Font', 
             'Apple SD Gothic Neo', 
             'Malgun Gothic', 
             sans-serif;

💡💡 Dicas Práticas

Configuração do projeto:

  • Defina regras de fonte no sistema de design
  • Estabeleça a estratégia de carregamento de fontes
  • Configure a pilha de fontes de fallback
  • Configure o monitoramento de desempenho

Manutenção:

  • Gerenciamento de versão de fonte
  • Limpe os pesos não utilizados
  • Verificações regulares de desempenho
  • Verifique se há novas atualizações de fontes