As melhores fontes para sites em 2026: 15 Google Fonts gratuitas classificadas para corpo de texto e títulos, com licença, designer, pilha de substituto CSS e combinação de cada fonte, além de como escolher, combinar e carregar fontes rapidamente.
Para texto de corpo, Inter, Source Sans 3 e Roboto são escolhas seguras e muito legíveis: grande altura-x, muitos pesos e amplo suporte a idiomas, todas gratuitas no Google Fonts sob a SIL Open Font License. Para títulos com personalidade, combine uma delas com uma serifa como Lora ou Playfair Display. A melhor fonte é aquela que lê bem entre 16 e 20px no celular com o seu conteúdo real.
Uma ou duas famílias de fonte são suficientes para quase todo site: uma para títulos e uma para o corpo do texto, ou uma única família usada em pesos diferentes. Cada família extra soma ruído visual e arquivos extras para baixar.
16px é a base comum e o padrão na maioria dos navegadores. Muitos sites usam 17 a 20px para leitura longa. Mantenha o comprimento da linha entre 50 e 75 caracteres e a altura da linha em torno de 1,5 para o corpo do texto.
As fontes na biblioteca do Google Fonts são lançadas sob licenças abertas, a maioria sob a SIL Open Font License, que permite uso comercial. Sempre verifique a licença listada para a fonte específica. Fontes de fundições ou da Adobe Fonts têm seus próprios termos.
Ambas são legíveis em telas modernas. Fontes sem serifa tendem a parecer neutras e modernas; serifas podem parecer editoriais, tradicionais ou premium. Escolha pelo tom que você quer e teste a legibilidade no tamanho real do seu corpo de texto, em vez de seguir uma regra antiga de que telas precisam de sem serifa.
Ambos funcionam. Hospedar você mesmo mantém as requisições no seu próprio domínio, dá controle total sobre o cache e evita enviar dados do visitante para terceiros, o que algumas equipes preferem por motivos de privacidade. Seja qual for a sua escolha, use arquivos WOFF2, carregue só os pesos que você usa, e defina o font-display.
As melhores fontes para sites são aquelas que leem bem entre 16 e 20px no celular, vêm em pesos suficientes, cobrem seus idiomas e são licenciadas para uso web. Nossas indicações abaixo são todas gratuitas no Google Fonts e, conforme o campo de licença na entrada de cada fonte no repositório do Google Fonts (github.com/google/fonts, verificado em 28 de setembro de 2026), todas as 15 estão lançadas sob a SIL Open Font License, que permite uso comercial e auto-hospedagem. A classificação é nosso julgamento editorial com base nos critérios deste guia, não um resultado de teste. Após a lista, o restante do guia cobre como escolher, combinar e carregar fontes.
Experimente qualquer combinação ao vivo, com o seu próprio texto, na ferramenta gratuita de combinação de fontes. A pilha CSS após cada nome é o substituto que recomendamos para o texto ainda parecer correto antes (ou sem) a fonte web carregar.
font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;font-family: "Source Sans 3", system-ui, sans-serif;font-family: "Roboto", system-ui, Arial, sans-serif;font-family: "Open Sans", system-ui, Arial, sans-serif;font-family: "Lato", system-ui, Arial, sans-serif;font-family: "Nunito Sans", system-ui, sans-serif;font-family: "IBM Plex Sans", system-ui, sans-serif;font-family: "Merriweather", Georgia, "Times New Roman", serif;font-family: "Lora", Georgia, serif;font-family: "Playfair Display", Georgia, serif;font-family: "Montserrat", system-ui, sans-serif;font-family: "Poppins", system-ui, sans-serif;font-family: "DM Sans", system-ui, sans-serif;font-family: "Work Sans", system-ui, sans-serif;font-family: "Space Grotesk", system-ui, sans-serif;| Título | Corpo | Sensação | Bom para |
|---|---|---|---|
| Playfair Display | Source Sans 3 | Elegante, clássico | Restaurantes, casamentos, boutiques |
| Lora | Inter | Editorial quente | Blogs, coaches, consultores |
| Montserrat | Open Sans | Confiante, limpo | Comércio, agências |
| Space Grotesk | Inter | Moderno, técnico | SaaS, estúdios |
| Merriweather | Source Sans 3 | Confiável | Direito, finanças, publicação |
| Inter 700 | Inter 400 | Neutro, rápido (uma família) | Qualquer coisa; o padrão mais seguro |
license: "OFL" em sua entrada no próprio repositório Google Fonts do Google (github.com/google/fonts), verificado em 28 de setembro de 2026. A SIL Open Font License permite uso em sites comerciais, incorporação e auto-hospedagem; você não pode vender os arquivos de fonte por conta própria.A maioria dos sites escolhe uma fonte de título que ama e depois procura algo para combinar com ela. Faça o contrário. O texto do corpo é o que as pessoas mais leem, e precisa funcionar em tamanhos pequenos em telas baratas.
O que verificar ao testar uma fonte de corpo:
Teste com o seu conteúdo real em um celular, não com "Lorem ipsum" em um monitor de desktop.
Fontes carregam associações. Use-as deliberadamente.
| Tom que você quer | Estilo de fonte que costuma combinar | Exemplos (gratuitos no Google Fonts) |
|---|---|---|
| Neutro, moderno, produto | Grotesca ou neo-grotesca sem serifa | Inter, Roboto, IBM Plex Sans |
| Amigável, acessível | Humanista ou sem serifa arredondada | Nunito Sans, Source Sans 3, Figtree |
| Editorial, confiável | Serifa de texto | Merriweather, Source Serif 4, Lora |
| Premium, elegante | Serifa de alto contraste (só títulos) | Playfair Display, Cormorant |
| Técnico, desenvolvedor | Monoespaçada (só detalhes) | JetBrains Mono, IBM Plex Mono |
| Ousado, enérgico | Sem serifa condensada ou pesada (títulos) | Oswald, Bebas Neue, Archivo |
Um escritório de advocacia, um negócio de festas infantis e uma ferramenta de desenvolvedor não deveriam parecer iguais. Pergunte: se a logo fosse removida, a tipografia ainda sugeriria que tipo de negócio é esse?
Se você usa duas fontes, elas deveriam ser claramente diferentes, ou vão parecer um erro. Duas fontes sem serifa parecidas lado a lado parecem acidentais; um título com serifa sobre um corpo sem serifa parece intencional.
Formas confiáveis de combinar:
Regra prática: uma fonte para personalidade, uma para o trabalho. Deixe a fonte de título carregar o caráter e a fonte de corpo ficar fora do caminho.
A consistência de fonte no site vem de um conjunto pequeno e fixo de tamanhos usados em todo lugar, não de escolher tamanhos página por página. Uma escala tipográfica multiplica um tamanho base por uma proporção.
Com uma base de 16px e uma proporção de 1,25 (frequentemente chamada de terça maior):
| Função | Tamanho |
|---|---|
| Texto pequeno, legendas | 13px |
| Corpo | 16px |
| H4 | 20px |
| H3 | 25px |
| H2 | 31px |
| H1 | 39px |
Proporções maiores como 1,333 dão títulos mais dramáticos; menores como 1,2 servem para interfaces densas. No celular, uma proporção menor evita que os títulos quebrem em cinco linhas. A função CSS clamp() permite que os tamanhos escalem suavemente entre celular e desktop:
``css :root { --font-body: "Source Sans 3", system-ui, sans-serif; --font-heading: "Lora", Georgia, serif; } body { font-family: var(--font-body); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.6; } h1 { font-family: var(--font-heading); font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); line-height: 1.15; } ``
Defina isso uma vez como variáveis ou tokens de design e reutilize. É assim que você mantém toda página consistente.
A fonte importa menos que como ela é configurada. Estes valores fazem a maioria das fontes ler bem:
Fontes são uma das formas mais fáceis de deixar um site lento ou fazer o texto pular enquanto carrega.
font-display: swap mostra o texto substituto imediatamente, depois troca pela fonte web. optional evita a troca em conexões lentas.<link rel="preload" as="font" type="font/woff2" crossorigin>.size-adjust, para o layout não mudar quando a fonte web chegar. Isso ajuda sua nota de Cumulative Layout Shift.Pilha de fontes do sistema como opção. Para interfaces e painéis, system-ui usa a fonte do próprio dispositivo (San Francisco em dispositivos Apple, Segoe UI no Windows, Roboto no Android). Sem download, familiar aos usuários, rápido.
Uma licença de desktop para uma fonte não permite automaticamente incorporá-la em um site.
A tipografia é uma das maiores partes de o que faz um bom site, e a consistência importa mais que qualquer escolha isolada de fonte. Se você constrói com a We.Inc, os sites começam a partir de designs com pares de fontes combinados e uma escala consistente, e você pode mudar as fontes pedindo no chat ou editando o código diretamente. Navegue pelos modelos para ver as combinações em uso.
Fontes (verificadas em 28 de set. de 2026): metadados do repositório do Google Fonts para cada fonte, github.com/google/fonts (campos de licença e designer); páginas de fontes em fonts.google.com; SIL Open Font License.
Comece grátis · Sem cartão de crédito