0Pricing
CSS Academy · Aula

Google Fonts e @font-face

Carregue fontes externas do Google Fonts ou defina fontes personalizadas usando a regra @font-face.

Google Fonts e @font-face é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

Por que usar fontes personalizadas

As fontes compatíveis com a Web oferecem apenas algumas opções. As fontes personalizadas permitem corresponder precisamente à identidade da marca. As duas principais abordagens são o Google Fonts (serviço hospedado) e o @font-face (hospedado por você).

Configuração do Google Fonts

Acesse fonts.google.com, selecione uma família de fontes, escolha os pesos e copie a tag <link> para o <head> do seu HTML:

<p>Add these tags to your document's <code>&lt;head&gt;</code>:</p>
<pre><code>&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"&gt;</code></pre>

Uso do Google Fonts no CSS

Depois de adicionar o link, faça referência à fonte pelo nome na lista de font-family:

<h1>Playfair Display Heading</h1>
<p>Roboto body text below the heading.</p>

Parâmetros do Google Fonts

O parâmetro display=swap usa a estratégia de troca da exibição da fonte: o texto aparece imediatamente na fonte alternativa e depois é trocado quando a fonte personalizada é carregada. Isso evita que o texto fique invisível durante o carregamento.

Noções básicas de @font-face

@font-face permite carregar um arquivo de fonte personalizada hospedado por você. Defina o nome da família da fonte e a origem do arquivo:

<p class="brand-text">Custom brand typeface text</p>

WOFF2: o formato moderno

WOFF2 (Formato aberto de fontes para a Web 2) é o formato recomendado. Ele oferece a melhor compressão (geralmente 30% menor que WOFF) e é compatível com todos os navegadores modernos. Sempre inclua WOFF como alternativa.

Vários pesos com @font-face

Declare um bloco @font-face para cada combinação de peso e estilo. Use o mesmo nome de font-family para que o navegador selecione automaticamente o arquivo correto:

<p>Regular weight 400 text with <strong>bold weight 700 text</strong> inline.</p>

Propriedade de carregamento da fonte

O descritor font-display controla o comportamento de carregamento da fonte:

  • swap — mostra a alternativa imediatamente e troca quando estiver pronta (recomendado)
  • block — mantém o texto invisível por até 3 segundos
  • fallback — aplica um bloqueio breve e depois usa permanentemente a alternativa
  • optional — usa a fonte somente se ela já estiver armazenada em cache
<p class="swap-text">Text swaps in once Inter loads.</p>

@font-face para fontes variáveis

As fontes variáveis definem intervalos de eixos em vez de valores de peso fixos:

<p class="variable-text">Variable weight text (550)</p>

Pré-carregamento de fontes essenciais

Faça o pré-carregamento do seu arquivo de fonte mais importante para reduzir o atraso que bloqueia a renderização. Adicione um <link rel="preload"> antes da folha de estilos:

<p>Add this to your document's <code>&lt;head&gt;</code> to preload the font file:</p>
<pre><code>&lt;link rel="preload" href="./fonts/inter.woff2" as="font" type="font/woff2" crossorigin&gt;</code></pre>

local() para evitar downloads

Use local() em src para verificar se o usuário já tem a fonte instalada antes de baixá-la:

<p class="roboto-text">Uses local Roboto if installed</p>

Verificação rápida

Qual formato de fonte oferece a melhor compressão e a mais ampla compatibilidade com navegadores modernos?

Recapitulação

O Google Fonts fornece fontes hospedadas de forma simples por meio de uma tag <link>. Hospede suas próprias fontes com @font-face usando o formato WOFF2 e font-display: swap para obter o melhor desempenho. Faça o pré-carregamento das fontes essenciais e use local() para evitar downloads desnecessários.

Perguntas Frequentes

A aula “Google Fonts e @font-face” é grátis?

Sim — o texto completo de “Google Fonts e @font-face” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “Google Fonts e @font-face”?

Carregue fontes externas do Google Fonts ou defina fontes personalizadas usando a regra @font-face. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Google Fonts e @font-face”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Famílias de Fontes e Fontes Seguras para a Web
  2. Tamanho, Peso e Estilo da Fonte
  3. Alinhamento, Decoração e Espaçamento de Texto
  4. Google Fonts e @font-face
← Voltar para CSS Academy