Fontik

Como usar uma fonte em um site com CSS

Para mostrar uma fonte no seu próprio site, coloque os arquivos WOFF2 dela no servidor e declare-os no CSS com @font-face. Os visitantes não precisam instalar nada.

Última atualização:

Passos

  1. Use os arquivos WOFF2: eles são pequenos e todos os navegadores atuais os aceitam. O kit web que você pode baixar na página da fonte contém arquivos WOFF2 e CSS pronto.
  2. Coloque os arquivos da fonte no seu próprio servidor, por exemplo na pasta /fonts/.
  3. Declare a fonte no CSS com @font-face: @font-face { font-family: "My Font"; src: url("/fonts/my-font.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
  4. Use-a nos seus estilos e sempre indique fontes reserva: body { font-family: "My Font", system-ui, sans-serif; }
  5. font-display: swap mostra o texto imediatamente em uma fonte reserva e a troca pela sua quando ela termina de carregar.
  6. Para uma fonte variável, use um único arquivo e declare o intervalo de pesos no @font-face, por exemplo font-weight: 100 900.

Dicas

  • Pré-carregue o arquivo principal com esta tag no head da página: <link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/my-font.woff2">
  • Mantenha apenas os pesos que você realmente usa.
  • Sirva os arquivos da mesma origem da página ou envie cabeçalhos CORS se eles vierem de outro domínio.
  • Confira se a licença permite o uso na web; fontes gratuitas com licenças abertas geralmente permitem.

Perguntas

Quais arquivos preciso para um site?

Os arquivos WOFF2. Eles são pequenos e funcionam em todos os navegadores atuais; o kit web da página da fonte os traz junto com CSS pronto.

Os visitantes precisam instalar a fonte?

Não: o navegador baixa a fonte do seu servidor assim que a página a solicita.

Posso usar a fonte em um projeto comercial?

Isso depende da licença da fonte. Leia-a na página da fonte no catálogo.

Outros guias