Fontes da Web

Este capítulo ensina a trazer uma família tipográfica para a Oficina Costeira sem depender de conta. A Oficina Costeira é um coletivo fictício de design em João Pessoa. A voz visual pode ser local.

O exemplo está em exemplos/21-fontes-da-web/. Este volume tem 52 capítulos.

Web font é arquivo. Arquivo pesa. Prefira @font-face na sua pasta. Google Fonts é atalho opcional, não requisito. O ciclo: ler, copiar, mudar uma coisa, prever, recarregar, conferir.

O que você vai aprender

• Distinguir fonte do sistema e fonte baixada.
• Declarar @font-face com arquivos em assets/fonts/.
• Pedir só os pesos que você usa.
• Entender font-display.
• Ligar Google Fonts só se quiser, como alternativa.
• Manter a fila de reserva e a licença.

A visitante só vê o que tem (ou o que baixa)

Sem web font, o navegador usa o que está no computador: Segoe UI, Tahoma, Georgia, uma genérica. Isso é rápido e suficiente para estudar.

Web font baixa um arquivo (woff2, às vezes woff) junto da página. A letra fica igual no Windows, no Linux e no celular. O custo é pedido extra, atraso e flash de texto.

A Oficina Costeira não precisa de uma família famosa para ser um bom exercício. Se for usar uma, hospede o arquivo no projeto.

Fontes instaladas no seu computador quase nunca podem ir para a Web. Licença de desktop não é licença de webfont. Use famílias com licença explícita (SIL OFL, Apache, similar) ou o pacote que o volume já trouxer.

@font-face local

Coloque os arquivos em assets/fonts/. Nomes em minúsculas, hífen, sem espaço: atelier-costa-regular.woff2. O mesmo critério dos capítulos de pastas.

Um HTML mínimo que já usa a fila, mesmo antes da fonte chegar:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Início · Oficina Costeira</title>
    <link rel="stylesheet" href="assets/stylesheets/main.css">
  </head>
  <body>
    <h1>Oficina Costeira</h1>
    <p>Coletivo fictício de design em João Pessoa.</p>
  </body>
</html>

No topo do main.css:

@font-face {
  font-family: "Atelier Costa";
  src: url("../fonts/atelier-costa-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atelier Costa";
  src: url("../fonts/atelier-costa-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Atelier Costa", "Segoe UI", Tahoma, sans-serif;
}

O nome em font-family é o rótulo que você inventa. Ele precisa casar na fila do body. O caminho do url é relativo ao CSS.

woff2 é o formato moderno. Um segundo url com woff pode existir como reserva. Evite TTF solto na rede se tiver woff2.

Se o exemplo deste volume ainda usa a fila de sistema, o código acima é o modelo para quando os arquivos existirem. Não invente um download pago. Não aponte para pasta do seu Windows (C:\Windows\Fonts).

unicode-range restringe o arquivo a um alfabeto. Útil se você tiver um woff2 só com latim. Neste volume o português cabe no arquivo completo. Não recorte a faixa sem necessidade: você apagaria acento.

@font-face {
  font-family: "Atelier Costa";
  src: url("../fonts/atelier-costa-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F;
}

Pesos, estilo e desempenho

Cada peso é um arquivo. Regular 400 e negrito 700 são o par mínimo. Itálico 400 é o terceiro. Quatro pesos vezes dois estilos viram oito downloads.

Peça só o que o HTML usa. A Oficina Costeira usa 400 no corpo e 700 na marca e nos títulos. Não carregue 300, 500 e 900 “por precaução”.

h1, h2, .brand {
  font-weight: 700;
}
strong {
  font-weight: 700;
}

Se você declarar font-weight: 600 e não houver arquivo 600, o navegador sintetiza. O traço fica feio. Case o número com o @font-face.

font-display: swap mostra a reserva na hora e troca quando o arquivo chega. A pessoa lê imediatamente. Pode haver um instante de troca de métrica. optional desiste da web font se ela atrasar. Para estudo, swap basta.

Google Fonts é opcional

Google Fonts gera um link para um CSS no servidor deles. Esse CSS aponta para arquivos em outro domínio. É cômodo. Custa privacidade, um DNS a mais e um ponto de falha.

Se quiser experimentar, o link entra no head antes do seu main.css. A fila no main.css cita o nome que o serviço mostrar.

<head>
  <meta charset="utf-8">
  <title>Início · Oficina Costeira</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Exemplo:wght@400;700&display=swap">
  <link rel="stylesheet" href="assets/stylesheets/main.css">
</head>

Isto não é obrigatório. Este volume prefere o @font-face local. Se a sala não tiver rede, a página local continua com Segoe UI.

Não crie conta. Não use serviço pago como único caminho. Não cole um kit que exige JavaScript.

Se baixar os arquivos do Google (ou de outro catálogo livre) e colocar em assets/fonts/, você volta ao método local. Esse é o melhor dos dois mundos: escolha no catálogo, entrega na sua pasta.

Fila de reserva nunca some

Mesmo com web font, a fila termina em genérica.

body {
  font-family: "Atelier Costa", "Segoe UI", Tahoma, sans-serif;
}

Se o woff2 404, a página não fica em Times acidental se a genérica for sans-serif. Confira na aba Rede. Arquivo vermelho explica o “sumiu a fonte”.

Métricas diferentes fazem o texto pular quando a web font chega. Escolha reserva parecida (sem serifa larga com sem serifa larga). size-adjust no @font-face existe para afinar. Não é obrigatório agora.

Ícones em fonte (“icon font”) misturam desenho e letra. Prefira SVG da marca, que o exemplo já tem em assets/imagens/marca.svg.

Licença e o que não fazer

Se o volume redistribuir uma família, a licença acompanha a pasta (OFL.txt ou equivalente). Não apague esse arquivo.

Não copie fonte de software pago. Não aponte @font-face para um arquivo no seu Desktop. O caminho precisa funcionar na máquina da aluna, dentro do exemplo.

Pare e experimente. Comente só a linha src de um @font-face (ou ignore o bloco se o exemplo ainda for sistema). Preveja: a página cai na reserva. Recarregue e confira o computed font-family no DevTools. Descomente.

Erro comum: ligar Google Fonts e esquecer de citar o nome no font-family. O link baixa o arquivo. Ninguém usa. A página continua em Times ou em Segoe, e a Rede mostra um download inútil.

A próximo capítulo junta tipografia, DevTools e validadores numa página que se segura só com tipo.

Atividades

1. Por que este volume prefere @font-face local a um link para o Google Fonts?
2. O que font-display: swap garante à leitura?
3. Quantos arquivos woff2 você precisa para regular e negrito, sem itálico?
4. O url do @font-face é relativo a qual arquivo?
5. O que fazer se a sala não tiver internet e o HTML tiver link para fonts.googleapis.com?

Respostas comentadas

1. O arquivo viaja com o exemplo, não pede conta, não rastreia e funciona em 127.0.0.1 sem DNS externo.
2. O texto aparece na hora com a reserva. A web font entra quando chegar.
3. Dois: peso 400 e peso 700, ambos font-style: normal.
4. Relativo ao main.css, em geral ../fonts/nome.woff2.
5. A reserva da fila entra. Por isso a genérica e as fontes de sistema estão no fim. Melhor ainda: hospedar local e não depender do link.

Referências

• @font-face
• font-display
• font-weight
• Web fonts
• font-family

O arquivo completo

Referência do exemplo 21-fontes-da-web, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}