Como Adicionar Fontes Personalizadas em um Site

1. Prepare os arquivos da fonte

Confirme que a sua licença permite uso na web. Depois, coloque seus arquivos TTF ou OTF no Webfont Generator e baixe o ZIP. Geralmente você só precisa dos arquivos WOFF2.

2. Envie os arquivos

Copie a pasta fonts para o seu site, por exemplo para /fonts/. As fontes precisam carregar do seu próprio domínio ou de um servidor que envie o cabeçalho Access-Control-Allow-Origin correto.

3. Adicione as regras @font-face

Cada peso e estilo recebe uma regra:

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

Use o mesmo nome de família para todos os pesos. Assim, o navegador escolhe sozinho o arquivo certo para textos normais e em negrito.

4. Use a fonte

body {
  font-family: "Brand Sans", Arial, sans-serif;
}

Sempre liste fontes alternativas, porque elas aparecem enquanto a sua fonte carrega ou se ela falhar.

Como adicionar fontes nas plataformas mais usadas

• Webflow: vá em Site settings → Fonts → Custom fonts e envie seus arquivos WOFF2.
• WordPress: temas de bloco podem gerenciar fontes na biblioteca de fontes do Editor do Site. Em outros temas, adicione os arquivos a um tema filho e coloque o CSS na folha de estilos dele.
• Tailwind CSS: adicione as regras ao seu CSS e depois defina a fonte como um valor do tema. A aba Tailwind do Webfont Generator já traz o código pronto.

Verifique se funciona

Abra o seu site e depois abra as ferramentas de desenvolvedor do navegador. No painel Network, filtre por Font e recarregue a página. Cada arquivo deve mostrar status 200. Um 404 geralmente significa que o caminho no seu CSS está errado. Uma requisição bloqueada normalmente aponta para o cabeçalho de origem cruzada. Depois, rode o Page Speed Test para ver como as fontes afetam a velocidade.