Melhores fontes para sites: 30 Google Fonts grátis em layouts reais

As melhores fontes para sites são legíveis em tamanhos pequenos, carregam rápido e combinam com a marca: Inter ou Geist para sites de produto, Source Serif 4 ou Newsreader para leitura, Rubik ou Nunito para negócios locais. Aqui estão 30 Google Fonts grátis exibidas ao vivo, com licenças, eixos variáveis e CSS para copiar e colar.

Atualizado em 13 de outubro de 2026

Estas são 30 fontes grátis do Google Fonts que funcionam bem em sites reais, organizadas pela tarefa em que se saem melhor. Cada uma aparece abaixo em um título, um parágrafo e um botão, com a licença, a indicação se é uma fonte variável, os pesos disponíveis, uma pilha de fallback e um trecho pronto para copiar. Os detalhes foram conferidos no catálogo do Google Fonts e nos arquivos de licença do repositório do Google Fonts em outubro de 2026.

Escolhas rápidas

• SaaS ou app: Inter ou Geist para tudo, ou Plus Jakarta Sans para uma landing page mais acolhedora.
• Blog ou publicação: Source Serif 4 ou Newsreader para o texto corrido, com uma sem serifa para a navegação.
• Negócio local: Rubik, Nunito ou Work Sans, legíveis no celular e simpáticas.
• Marca premium ou clássica: Playfair Display ou EB Garamond para os títulos, com uma sem serifa discreta para o texto corrido.
• Muitos idiomas: Noto Sans.

Teste com o seu próprio texto

Digite abaixo para substituir o texto de exemplo em todas as prévias desta página. As fontes são carregadas do Google Fonts quando você abre esta seção; até lá, cada prévia mostra a sua pilha de fallback, que também é o que os visitantes veem por um instante enquanto uma web font é baixada.

As 30 fontes num relance

As 30 são distribuídas sob a SIL Open Font License 1.1, que permite uso comercial, incorporação em sites e hospedagem própria, e deixa você modificar as fontes desde que não venda os arquivos das fontes isoladamente nem reutilize os nomes de fonte reservados em versões modificadas. Algumas poucas famílias do Google Fonts usam outras licenças abertas: algumas estão sob a Apache License 2.0 (por exemplo Permanent Marker e Special Elite) e a família Ubuntu usa a Ubuntu Font Licence. Sempre confira a licença exibida na página da família em fonts.google.com antes de colocá-la no ar.

<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Geist:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Figtree:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Merriweather:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Merriweather", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Lora:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Lora", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Playfair Display", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Source Serif 4", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "EB Garamond", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Fraunces:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Fraunces", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Newsreader:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Newsreader", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

/* CSS */
font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Nunito:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Rubik:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Work+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">

/* CSS */
font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Archivo:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

Como carregar uma Google Font

Coloque estas linhas no <head> da sua página, antes da sua própria folha de estilo. As duas dicas de preconnect permitem que o navegador abra cedo as conexões com o host da folha de estilo e com o host dos arquivos de fonte; os arquivos de fonte são servidos de outro domínio e buscados em modo CORS, e é por isso que a segunda dica tem crossorigin.

<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=Inter:[email protected]&family=Source+Serif+4:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">

body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
h1, h2, h3 { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; }

Entendendo a URL css2

• family=Inter:[email protected] pede uma faixa de pesos de uma fonte variável. Reduza a faixa ao que você usa; o navegador ainda baixa um arquivo por subconjunto.
• family=Lato:wght@400;700 pede dois pesos estáticos específicos. Em famílias estáticas, cada peso listado é mais um arquivo.
• ital,wght@0,400..700;1,400..700 acrescenta os estilos itálicos. Os nomes dos eixos vão em ordem alfabética, minúsculas antes de maiúsculas.
• Repita family= para carregar várias famílias em uma só requisição.
• display=swap define font-display: swap nas regras @font-face retornadas, para que o texto apareça imediatamente na fonte de fallback e troque quando a web font chegar, em vez de ficar invisível.
• text=Hello retorna um arquivo contendo só esses caracteres, o que é útil para uma palavra de logo composta em uma fonte que você não usa em nenhum outro lugar.

Opções de font-display

Hospedagem própria

Como estas fontes têm licença aberta, você pode servir os arquivos do seu próprio domínio em vez do domínio do Google. Motivos para fazer isso: uma conexão de terceiros a menos, controle total do cache e privacidade, já que as requisições aos servidores do Google enviam o endereço IP do visitante ao Google, algo que alguns donos de sites europeus evitam. Formas de fazer isso:

• Baixe a família na página dela em fonts.google.com, converta ou mantenha os arquivos WOFF2 e escreva suas próprias regras @font-face.
• Em um projeto JavaScript, instale a família pelo Fontsource (por exemplo npm install @fontsource-variable/inter) e importe-a no seu arquivo de entrada.
• Projetos Next.js podem usar next/font/google, que baixa os arquivos no momento do build e os serve do seu próprio domínio.

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;      /* the variable range */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}

Ao hospedar por conta própria, faça preload apenas do arquivo de que o texto acima da dobra precisa, com <link rel="preload" href="/fonts/inter-latin-var.woff2" as="font" type="font/woff2" crossorigin>. Fazer preload de várias fontes faz com que elas disputem banda com suas imagens e scripts.

Observações sobre fontes variáveis

Uma fonte variável é um único arquivo que contém uma faixa contínua ao longo de um ou mais eixos, em vez de um arquivo por peso. 28 das 30 fontes aqui são variáveis; Poppins e Lato são estáticas.

• Peso (wght) é controlado pela propriedade font-weight normal, e qualquer número dentro da faixa funciona: font-weight: 650 é válido.
• Largura (wdth), oferecida aqui por Roboto, Open Sans, IBM Plex Sans, Noto Sans, Archivo e Merriweather, corresponde a font-stretch como porcentagem, por exemplo font-stretch: 85%.
• Tamanho óptico (opsz), presente em Inter, DM Sans, Source Serif 4, Newsreader, Merriweather e Fraunces, ajusta o formato das letras ao tamanho em que são compostas. Os navegadores o aplicam automaticamente a partir do tamanho da fonte porque font-optical-sizing tem auto como padrão. Peça o eixo na URL (por exemplo family=Inter:opsz,[email protected],100..900) para obtê-lo.
• Eixos personalizados, como SOFT e WONK da Fraunces, são definidos com font-variation-settings: "SOFT" 100, "WONK" 1;. Use as propriedades padrão de peso, largura e inclinação em vez desta propriedade sempre que existirem, porque os valores de font-variation-settings não se combinam entre regras.
• Um arquivo variável é maior que qualquer peso estático isolado. Ele compensa quando você usa mais ou menos três pesos ou mais, e quando quer pesos intermediários para ajustes finos.

h1 { font-weight: 780; font-stretch: 90%; }
.lede { font-weight: 350; }
.fun-heading { font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 1; }

Fontes web-safe e pilhas de fontes do sistema

Fontes "web-safe" são as instaladas em quase todos os computadores Windows e Mac, por isso não precisam ser baixadas. Elas não são garantidas no Android, no Linux nem em todo iPhone, e é por isso que uma pilha de fontes sempre termina com uma família genérica como sans-serif ou serif.

Uma pilha de fontes do sistema vai além e usa a fonte de interface de cada sistema operacional: San Francisco em dispositivos Apple, Segoe UI no Windows, Roboto no Android e normalmente Noto ou outra padrão no Linux. Não custa nada para carregar e tem aparência nativa. Estas são as pilhas que recomendamos no momento em que escrevemos:

/* Sans: the operating system's interface font */
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  "Helvetica Neue", Arial, "Noto Sans", sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

/* Serif */
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

/* Monospace */
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
  "Liberation Mono", "Courier New", monospace;

system-ui é suportado por todos os principais navegadores atuais. -apple-system e BlinkMacSystemFont só ajudam navegadores mais antigos em dispositivos Apple e podem ser removidos se você não der suporte a eles. ui-serif e ui-monospace não são reconhecidos por todos os navegadores, e é por isso que cada pilha continua com fontes nomeadas. As fontes de emoji ficam no final para que os caracteres de emoji apareçam coloridos.

Este parágrafo está composto na pilha sem serifa do sistema, então mostra a fonte de interface do seu próprio dispositivo.

Observações sobre desempenho

• Use menos famílias e pesos. Cada peso estático, cada itálico e cada família extra é mais um arquivo. Duas famílias, ou uma família variável mais o seu itálico, atendem à maioria dos sites.
• Prefira WOFF2. É o formato de web font mais comprimido e todos os navegadores atuais o suportam. O Google Fonts o serve automaticamente.
• Crie subconjuntos por idioma. A folha de estilo do Google Fonts já divide cada família em subconjuntos com unicode-range, então uma página só em inglês baixa apenas o arquivo latino. Faça o mesmo ao hospedar por conta própria.
• Reduza a mudança de layout na troca. Se o fallback e a web font têm larguras diferentes, o texto se reorganiza quando a fonte chega. Escolha um fallback com proporções parecidas ou ajuste-o com size-adjust, ascent-override e descent-override em um @font-face de fallback. next/font e algumas ferramentas de build geram esses valores para você.
• Não esconda o texto. Sem font-display: swap ou optional, os navegadores podem não mostrar texto nenhum por um curto período enquanto as fontes são baixadas, o que atrasa o momento em que a página pode ser lida.
• Meça, não adivinhe. Rode um teste de laboratório na sua página antes e depois de trocar as fontes. Nosso guia sobre o PageSpeed Insights explica quais números as fontes afetam.

Sugestões de combinação de fontes

Combine fontes que se diferenciem claramente (uma serifada com uma sem serifa, ou uma fonte de display larga com uma fonte de texto simples) e que tenham algo em comum, como altura-x ou clima parecidos. Limite-se a duas famílias. Estas combinações usam apenas fontes desta página:

Para testar mais combinações lado a lado, use a ferramenta de combinação de fontes. Para cores que combinam com a sua tipografia, veja esquemas de cores para sites, e para layouts prontos que usam estas fontes, navegue pelos componentes de seção hero.

Perguntas frequentes

Qual é a melhor fonte para um site?

Não existe uma única melhor fonte, mas Inter, Source Sans 3 e Open Sans são escolhas confiáveis para o texto corrido porque continuam nítidas em tamanhos pequenos. Para os títulos, escolha algo com mais personalidade que combine com a marca, como Playfair Display, Fraunces ou Space Grotesk.

As Google Fonts são livres para uso comercial?

Sim. Todas as famílias do Google Fonts estão sob uma licença aberta, na maioria a SIL Open Font License 1.1, com algumas sob a Apache License 2.0 e a Ubuntu Font Licence. As três permitem uso comercial em sites, em apps e em impressos. Confira a licença na página de cada família antes de usá-la.

Quantas fontes um site deve usar?

Normalmente uma ou duas famílias. Uma configuração comum é uma para os títulos e outra para o texto corrido, ou uma única família usando pesos diferentes para os dois. Cada família e peso extra acrescenta arquivos que o navegador precisa baixar.

O que é uma fonte variável?

Uma fonte variável é um único arquivo de fonte que contém uma faixa contínua de estilos ao longo de eixos como peso, largura ou tamanho óptico. Em vez de carregar arquivos separados para regular, médio e negrito, você carrega um só arquivo e pode usar qualquer peso dentro da faixa.

O que são fontes web-safe?

Fontes que já vêm instaladas em quase todos os computadores Windows e Mac, como Arial, Verdana, Georgia e Times New Roman, e por isso não precisam ser baixadas. Elas não são garantidas em todo celular ou sistema Linux, então sempre termine uma pilha de fontes com uma família genérica como sans-serif.

Devo hospedar as Google Fonts por conta própria?

Pode, já que as licenças permitem. A hospedagem própria elimina uma conexão com um domínio de terceiros, dá a você controle do cache e mantém os endereços IP dos visitantes longe do Google. Carregar pelo Google Fonts é mais simples e cuida dos subconjuntos para você. De qualquer forma, use WOFF2 e font-display: swap.

Texto do título

O nome da sua empresa ou um título

Texto do parágrafo

Uma frase da sua própria página inicial

Texto do botão

Agendar agora

Tamanho do título: {n}px

Restaurar exemplos

Comece grátis · Sem cartão de crédito

Relacionados: Guias

• Bibliotecas de ícones SVG grátis comparadas
• Registro BIMI
• Bing Places for Business
• Exemplos de Bootstrap 5 com equivalentes em Tailwind
• Chave da Brave Search API
• Web design brutalista
• Sites com Blog
• Assuntos de e-mail profissional que são abertos

Produto

• Criador de sites com IA
• Instalamos nosso criador de sites IA de $2M no seu negócio
• Empresas
• Documentação da API

Para quem é

• Para agências
• Para freelancers
• Para provedores de hospedagem
• Para plataformas SaaS
• Para startups
• Serviços financeiros
• Soluções para saúde

Recursos

• Editor de arrastar e soltar
• SEO e análises
• Marca personalizada
• Painel do cliente
• Faturamento de revenda

Recursos

• Blog
• Central de Ajuda
• Ferramentas gratuitas para empresas
• Free UI Components
• Modelos
• Coleções de modelos
• Exemplos de sites
• Guias
• Comparações
• Alternativas
• Os melhores
• Avaliações
• Guias de preços
• Glossário e guias
• Integrações
• Desenvolvedores
• Benchmark
• Windows App

Empresa

• Sobre nós
• Preços
• Candidatar-se ao programa de parceiros
• Fale conosco
• Carreiras
• Segurança
• Política de privacidade
• Termos de serviço

Mapa do site