Combinador de Fontes Google

Sobre o Combinador de Fontes Google

Encontre as combinações perfeitas de Google Fonts para seus projetos web. Visualize combinações de fontes de título e corpo em tempo real com diferentes tipos de conteúdo e obtenha código CSS instantâneo.

O que faz duas fontes combinarem bem?

Boas combinações oferecem contraste visual mantendo a harmonia — tipicamente misturando uma serifa e uma sem-serifa, ou duas fontes com pesos ou proporções claramente diferentes. A regra clássica de Elements of Typographic Style de Bringhurst é combinar fontes da mesma família de designer (como Source Sans + Source Serif) ou fontes com altura x e contraste de traço similares. Armadilhas comuns: combinar duas fontes que parecem similares mas não idênticas gera inconsistência incômoda, enquanto combinar fontes de períodos históricos muito diferentes (Garamond + Bebas) pode parecer desconexo. O Google Fonts publica uma aba 'Pairings' para cada fonte sugerindo combinações pré-testadas pela comunidade de design.

Como a API Google Fonts afeta a velocidade de carregamento?

Cada família buscada em `fonts.googleapis.com/css2` adiciona uma requisição HTTP mais o download do WOFF2 (tipicamente 15-40 KB por peso). O navegador não renderiza texto nessa fonte até o arquivo chegar, causando Flash de Texto Invisível (FOIT) ou Flash de Texto Sem Estilo (FOUT). Use `font-display: swap` no CSS para mostrar texto fallback imediatamente e trocar pela fonte personalizada quando carregada — agora é o padrão do Google Fonts. Hospedar fontes localmente com headers Cache-Control adequados pode ser mais rápido que o CDN porque evita lookup DNS e conexão separados. Sempre preload fontes críticas com `<link rel="preload" href="..." as="font" crossorigin>`.

O que é font-display e qual valor devo usar?

O descritor CSS `font-display` (CSS Fonts Module Level 4) controla como as fontes renderizam durante o carregamento. Valores: `auto` (padrão do navegador, costuma bloquear o render), `block` (3 segundos de texto invisível e troca), `swap` (fallback imediato e troca quando carrega), `fallback` (100 ms invisível, depois fallback, troca se a fonte vier em 3 s), `optional` (100 ms invisível, depois fallback, sem troca). A documentação MDN recomenda `swap` para texto de corpo e `optional` para fontes de ícones não essenciais. O Google Fonts usa `swap` por padrão desde 2019 para melhorar Core Web Vitals — a mudança reduziu o First Contentful Paint médio em ~150 ms na web.

Quantas fontes um site deve usar?

O consenso da indústria é no máximo duas a três fontes: uma para títulos, uma para corpo de texto e opcionalmente uma monoespaçada para código ou dados numéricos. Cada fonte adicional aumenta o peso da página (15-100 KB), as requisições HTTP e a complexidade visual. Sistemas de design famosos concordam: Material Design usa Roboto + Roboto Mono, Apple Human Interface usa SF Pro + SF Mono e IBM Carbon usa IBM Plex. Fontes variáveis (CSS Fonts Module Level 4 `font-variation-settings`) permitem carregar um arquivo mas usar múltiplos pesos e estilos, reduzindo drasticamente o payload total. Considere Inter, Recursive ou Source Sans 3 — todas variáveis, todas com licença aberta.

Que licenças as Google Fonts usam?

Todas as fontes na biblioteca Google Fonts são licenciadas sob a SIL Open Font License 1.1 (OFL) ou a Apache License 2.0, ambas permitindo uso comercial e pessoal livre, modificação e incorporação em software. A OFL especificamente proíbe vender a fonte em si mas permite empacotá-la dentro de aplicações. O Google Fonts armazena em cache os arquivos de fonte e o CSS sob os mesmos termos. Para hospedar localmente, baixe em fonts.google.com (download zip) e sirva do seu próprio domínio — necessário para conformidade com GDPR em jurisdições da UE porque usar fonts.googleapis.com transfere os IPs dos usuários para o Google.

Por que GDPR e leis de cookies são preocupação com Google Fonts?

Usar `fonts.googleapis.com` faz o navegador do usuário fazer uma requisição HTTP aos servidores do Google, transmitindo o endereço IP — considerado dado pessoal pelo GDPR Artigo 4. Uma decisão do Tribunal Regional de Munique em janeiro de 2022 (3 O 17493/20) determinou que incorporar Google Fonts sem consentimento viola o GDPR, concedendo 100 € em danos. Hospedar localmente elimina o risco legal por completo. Ferramentas como `google-webfonts-helper` (gwfh.mranftl.com) geram o CSS e baixam os WOFF2 para hospedagem própria. Sempre verifique a lei de privacidade da sua jurisdição e documente a base legal na política de privacidade se continuar usando o CDN.

Posso usar fontes variáveis do Google Fonts?

Sim — o Google Fonts hospeda mais de 200 fontes variáveis incluindo Inter, Recursive, Source Sans 3, Open Sans, Roboto Flex e Newsreader. Solicite uma fonte variável com a sintaxe `:[email protected]` na URL: `https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap`. O CSS usa `font-weight: 100` a 900 (ou qualquer valor intermediário) sem downloads de arquivos separados — o arquivo variável contém todos os pesos interpolados. O suporte de navegadores é excelente: Chrome 62+, Firefox 62+, Safari 11+. Algumas fontes também expõem eixos de largura (`wdth`), itálico (`ital`) e tamanho óptico (`opsz`) via `font-variation-settings`.

Qual a diferença entre Google Fonts e Adobe Fonts (antigo Typekit)?

O Google Fonts é gratuito, open source, hospedado no CDN do Google e inclui cerca de 1.500 famílias. O Adobe Fonts (antigo Typekit) está incluso em assinaturas do Creative Cloud (US$ 20-60/mês), hospeda cerca de 25.000 famílias incluindo clássicos premium (Helvetica, Futura, Garamond) e oferece sincronização desktop via o app Creative Cloud. O Adobe Fonts tem licenciamento mais restrito (sem auto-hospedagem, exige a tag `<script>` da Adobe), enquanto o Google Fonts permite auto-hospedagem completa sob OFL. Para design comercial precisando de tipografias premium, Adobe vence; para fontes web gratuitas, abertas e de carregamento rápido, Google Fonts vence. Muitos sites usam ambos.