Como encontrar a URL do Google Fonts

Aprenda a encontrar e copiar a URL do Google Fonts para usar fontes personalizadas no favicon. O passo a passo está abaixo.

Por que Google Fonts? Recomendamos o Google Fonts porque as fontes do site são gratuitas para uso comercial. Dá para usá-las no favicon sem se preocupar com licença ou custo extra.

Passo a passo

Passo 1: Abra o Google Fonts

Acesse fonts.google.com no navegador. É o site oficial do Google Fonts, com milhares de fontes gratuitas.

Passo 2: Escolha uma fonte

Navegue pela coleção e clique na fonte que quiser usar. Dá para buscar pelo nome na barra de pesquisa no topo da página.

Passo 3: Adicione fontes à seleção

Quando achar uma fonte, clique em "Get font" no canto superior direito. Isso adiciona a fonte à seleção. Repita para incluir várias: o gerador de favicon carrega múltiplas fontes a partir de uma única URL.

Localização do botão Get font do Google Fonts no canto superior direito

O botão "Get font" fica no canto superior direito

Passo 4: Abra as fontes selecionadas

Depois de adicionar as fontes, procure "View selected families" no canto superior direito. O botão mostra um badge com a quantidade selecionada. Clique para abrir a coleção e, em seguida, em "Get embed code" para ver o trecho de código.

Botões View selected families e Get embed code do Google Fonts

Clique em "View selected families" e depois em "Get embed code"

Código de embed do Google Fonts com tags link e URLs das fontes

A caixa de código de embed com todas as tags link

Passo 5: Extraia a URL da fonte

O Google Fonts mostra várias tags link, inclusive preconnect e a folha de estilos principal. O trecho se parece com isto:

 <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=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

Encontre a tag link cuja URL contém css2 — em geral é a mais longa. Copie a URL inteira do atributo href (tudo entre as aspas). No exemplo acima, a URL é:

https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap

Cole no campo Fonte Personalizada do gerador de favicon. Essa única URL traz todas as fontes que você selecionou.

Dicas

Inclua sempre &display=swap na URL para melhor desempenho
Selecione só as fontes que for usar de verdade, para reduzir o tempo de carregamento
Copie a URL inteira; se faltar um pedaço, o gerador de favicon pode não carregar as fontes