Carregando...

Fontes web em CSS

Você já conhece font-family, tamanho e peso. Fontes web carregam uma tipografia que não está necessariamente no dispositivo do visitante — declare com @font-face, use o nome da família como qualquer outra fonte e termine com um fallback calmo.

Peças do @font-face

📊 @font-face em um olhar

Peça Trabalho do dia a dia
font-family O nome que você inventa e depois usa no CSS
src Onde o(s) arquivo(s) de fonte vivem (url(...) e muitas vezes format(...))
font-weight / font-style Qual face este arquivo representa (regular, bold, italic…)
font-display Como o texto se comporta enquanto a fonte carrega (ex. swap)

Pense em dois passos calmos: registre a face com @font-face e depois chame o mesmo nome de família nas regras normais. Pular um deles deixa uma pilha que nunca acha o arquivo personalizado.

Um @font-face mínimo

Dê um nome claro à face e aponte src para um arquivo de fonte no seu site (ou CDN).

@font-face básico

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}

Ofereça mais de um formato

Navegadores modernos preferem woff2. Listar woff depois cobre navegadores mais antigos. Coloque o melhor formato primeiro.

woff2 depois woff

css
CSS Code 
@font-face {
font-family: "Site Sans";
src:
url("/fonts/site-sans.woff2") format("woff2"),
url("/fonts/site-sans.woff") format("woff");
font-weight: 400;
font-style: normal;
}

font-display — mostre o texto mais cedo

font-display: swap deixa o navegador mostrar texto de fallback primeiro e depois trocar a fonte web quando chegar — muitas vezes melhor que um longo buraco invisível.

Display swap

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}

Use a família que você declarou

Após @font-face, chame o mesmo nome font-family nas suas regras — e mantenha um fallback genérico.

Aplicar a família personalizada

css
CSS Code 
body {
font-family: "Site Sans", system-ui, "Segoe UI", sans-serif;
font-size: 1rem;
line-height: 1.6;
}

Um hábito calmo de auto-hospedagem

Hospede só os pesos de que precisa, prefira woff2, defina font-display e mantenha sempre uma pilha de sistema/genérica.

Título com face bold carregada

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}

h1 {
font-family: "Site Sans", Georgia, serif;
font-weight: 700;
}

Experimente você

  1. Escreva um bloco @font-face com font-family personalizado e src woff2.
  2. Adicione uma segunda linha src para woff.
  3. Defina font-display: swap.
  4. Aplique "Your Name", sans-serif em body.
  5. Se tiver um arquivo bold, adicione um @font-face separado para peso 700 — depois font-weight: 700 num título.

Erros comuns

  • Declarar @font-face mas nunca usar esse nome exato em font-family
  • Omitir a pilha de fallback (quebra se o arquivo falhar)
  • Carregar muitos pesos e estilos que não usa (páginas lentas)
  • Deixar o texto invisível por muito tempo sem estratégia font-display
  • Misturar esta lição com text-shadow / efeitos (vêm a seguir)

Resumo

  • @font-face registra um nome de família personalizado e aponta para arquivos de fonte
  • Prefira woff2, opcionalmente com woff de reserva
  • font-display: swap muitas vezes mantém o texto legível enquanto as fontes carregam
  • Use o mesmo nome de família no CSS com um fallback de sistema/genérico
  • Carregue só as faces de que precisa; efeitos como text-shadow são uma lição posterior

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 28 de 35
Css Tutorial