Roboto nos títulos, Open Sans no corpo do texto. A tipografia do site parece metade das instalações WordPress. O visitante notou o padrão, reconheceu a fonte e o site perdeu parte da sua individualidade antes do primeiro parágrafo.

Uma fonte personalizada liga-se ao WordPress de duas formas: através de um plugin em 2 minutos sem uma única linha de código, ou manualmente via @font-face com controlo total sobre os ficheiros. Ambas funcionam de forma fiável, a escolha depende da sua experiência com CSS.

A seguir, vamos ver onde obter fontes, como configurar um plugin e como adicionar @font-face num tema filho. O código é retirado de instalações em funcionamento: cole-o, substitua o nome do ficheiro e a sua tipografia fica pronta.

💡 Resumo rápido:

• Descarregue uma fonte do DaFont ou FontSquirrel em formato WOFF2 ou TTF: pelo menos três pesos (regular, negrito, itálico).
• Instale o Use Any Font ou o Fonts Plugin, carregue o ficheiro através do painel de administração e atribua a fonte aos elementos. Sem necessidade de código.
• Ou faça a ligação manualmente: crie uma pasta fonts no tema filho, carregue os ficheiros via FTP e adicione @font-face no style.css para cada peso.
• Verifique a visualização em vários navegadores e não instale mais de duas fontes personalizadas: cada ficheiro aumenta o peso da página.

Onde obter fontes e em que formato

Toda a gente conhece o Google Fonts, e é exatamente por isso que estão em todo o lado. Se precisar de algo menos batido, aqui estão três fontes comprovadas.

O DaFont oferece mais de 3500 fontes com categorias desde banda desenhada a vintage. A maioria é gratuita para uso pessoal. Para projetos comerciais, verifique a licença de cada ficheiro separadamente, estão listadas na página da fonte.

O FontSquirrel foca-se em fontes gratuitas com licenças comerciais. A coleção é pequena, mas cada fonte foi verificada por advogados. O gerador integrado converte um ficheiro descarregado para WOFF e WOFF2 com um clique.

A FontSpring vende fontes pagas, mas quase todas as famílias têm um ou dois pesos gratuitos. Leia a licença com atenção antes de descarregar: pesos diferentes podem ter termos diferentes.

Regra geral: não coloque mais de duas fontes personalizadas num site. Uma para títulos, outra para o corpo do texto, é suficiente. Cada ficheiro adiciona um pedido HTTP e aumenta o peso da página entre 30 a 100 KB.

Descarregue todos os pesos de uma vez: regular, negrito, itálico e negrito itálico. Se o ficheiro tiver apenas um peso, o navegador vai simular o negrito e o itálico com espessamento artificial, o resultado parece grosseiro.

Método 1: plugin em 2 minutos

Um plugin, o caminho mais simples. Instala-se, carrega-se o ficheiro da fonte, escolhe-se onde aplicá-la. Sem código, sem ligações FTP.

Use Any Font

🔗 Use Any Font no WordPress.org

🔗 Capturas de ecrã e demonstração

Carrega fontes nos formatos TTF, OTF e WOFF, converte automaticamente para WOFF2 com compressão Brotli. De acordo com a página do plugin no WordPress.org, a velocidade de carregamento melhora cerca de 30%. As fontes ficam armazenadas no seu servidor: conformidade com o RGPD desde o início, sem dependência de APIs externas após a conversão.

Após a instalação, recebe uma chave de API (a chave gratuita Lite permite uma conversão), carrega o ficheiro e atribui a fonte através da interface visual. Pode aplicá-la a títulos, parágrafos ou blocos específicos diretamente do painel de administração.

Suporta integração com Elementor, Divi, WPBakery, Gutenberg: atribua a fonte uma vez no plugin e ela aparece na lista de fontes do construtor.

Nota: para várias fontes, precisa de uma chave Premium. Para um site típico, a versão gratuita é suficiente: uma fonte de marca para os títulos, Google Fonts para o texto.

Fonts Plugin

🔗 Fonts Plugin no WordPress.org

🔗 Capturas de ecrã do plugin

Antigo Olympus Google Fonts: foi renomeado e a funcionalidade foi expandida. De acordo com a página do plugin, tem mais de 200 000 instalações ativas e uma classificação de 5 estrelas por mais de 1200 utilizadores. Suporta Google Fonts, Adobe Fonts (Typekit) e o carregamento de ficheiros personalizados.

A configuração é feita através do personalizador: selecione uma fonte, veja uma pré-visualização ao vivo, guarde.

A versão Pro adiciona alojamento local das Google Fonts para o RGPD, carregamento seletivo apenas dos pesos necessários e controlo de tamanho, cor e altura de linha. A versão gratuita é suficiente para a maioria dos sites.

Plugin ou manual: quando escolher o quê

Um plugin ganha em rapidez: instalação em 2 minutos, sem necessidade de código. Mas fica dependente das atualizações do plugin e da sua compatibilidade com a versão do WordPress.

A instalação manual via @font-face é mais complexa de configurar, mas controla cada byte. Sem APIs de terceiros, sem atualizações a quebrar a sua tipografia.

Se já trabalha com um tema filho, o método manual integrar-se-á organicamente no seu CSS. As fontes passam a fazer parte do tema e aí permanecerão durante anos.

Método 2: instalação manual via @font-face

A diretiva @font-face liga ficheiros de fontes diretamente a partir do seu servidor. Os formatos suportados são TTF, OTF, WOFF, WOFF2 e SVG. Cada peso necessita de um bloco de código separado.

Mas após a configuração, esquece a tipografia durante anos: as atualizações do WordPress e do tema não afetam as fontes, estas ficam no seu tema filho e carregam sempre como parte do CSS.

Antes de começar, crie um tema filho: todas as edições vão para lá, o tema principal permanece intacto e será atualizado sem perder as suas alterações.

Passo 1: criar uma pasta para as fontes

Na pasta do tema filho, crie um diretório fonts. Adicione-o via FTP ou gestor de ficheiros do alojamento:

1
wp-content/themes/your-child-theme/fonts/

Se o seu tema filho se chamar twentytwentyfour-child, o caminho será wp-content/themes/twentytwentyfour-child/fonts/.

Passo 2: enviar os ficheiros de fontes para o servidor

Copie os ficheiros transferidos para a pasta fonts via FTP ou gestor de ficheiros do alojamento. Para cada peso, um ficheiro separado:

1
fonts/WebFont.woff2
2
fonts/WebFont.woff
3
fonts/WebFont-Bold.woff2
4
fonts/WebFont-Bold.woff
5
fonts/WebFont-Italic.woff2
6
fonts/WebFont-Italic.woff

Na prática, os formatos WOFF e WOFF2 são suficientes: cobrem todos os navegadores modernos e pesam menos que o TTF. De acordo com a MDN Web Docs, o WOFF2 comprime uma fonte 30% mais eficientemente do que o WOFF e é suportado por todos os navegadores desde 2016.

O navegador escolherá o formato apropriado entre os que foram ligados: se suportar WOFF2, carregará esse; se não, usará o WOFF.

Passo 3: adicionar @font-face no style.css

Abra o style.css do tema filho e adicione o código após o cabeçalho do tema (o comentário com o nome e a descrição do tema). Comece com o peso regular:

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont.woff2') format('woff2'),
4
         url('fonts/WebFont.woff') format('woff');
5
    font-weight: normal;
6
    font-style: normal;
7
}

font-family, o nome da fonte que usará no CSS. Dê um nome que não se confunda com fontes de sistema: não Arial, mas MyBrandSans ou BrandHeading. src, caminho para os ficheiros relativo ao style.css. A ordem importa: WOFF2 primeiro (mais leve), WOFF em segundo (alternativa para navegadores mais antigos).

Passo 4: adicionar itálico

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Italic.woff2') format('woff2'),
4
         url('fonts/WebFont-Italic.woff') format('woff');
5
    font-weight: normal;
6
    font-style: italic;
7
}

Nota: font-family é a mesma, font-weight mantém-se normal e font-style muda para italic. O navegador substituirá o ficheiro certo para a tag em e a propriedade font-style: italic.

Passo 5: adicionar peso negrito

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Bold.woff2') format('woff2'),
4
         url('fonts/WebFont-Bold.woff') format('woff');
5
    font-weight: bold;
6
    font-style: normal;
7
}

Aqui font-style volta a ser normal e font-weight é agora bold. Agora a tag strong e a propriedade font-weight: bold serão renderizadas com o seu ficheiro negrito, não com um falso espessamento do navegador. A diferença é notória: o peso negrito real é equilibrado pelo designer da fonte, a falsificação parece grosseira.

Passo 6: negrito itálico (opcional)

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-BoldItalic.woff2') format('woff2'),
4
         url('fonts/WebFont-BoldItalic.woff') format('woff');
5
    font-weight: bold;
6
    font-style: italic;
7
}

Quatro pesos cobrem praticamente todas as tarefas tipográficas de um site comum. Se o design não exigir negrito itálico, salte este passo: o ficheiro não será carregado até que o CSS solicite explicitamente a combinação negrito + itálico.

Passo 7: aplicar a fonte aos elementos

Após o @font-face, adicione regras que atribuam a fonte a elementos específicos. Adicione ao style.css do tema filho:

1
body {
2
    font-family: 'MyWebFont', Arial, sans-serif;
3
}
4
 
5
h1, h2, h3 {
6
    font-family: 'MyWebFont', Georgia, serif;
7
}

A primeira regra: a sua fonte para o corpo do texto, com uma alternativa para a Arial do sistema. A segunda: a mesma fonte para os cabeçalhos, com uma alternativa para a Georgia.

Se o ficheiro da fonte não carregar (o servidor está em baixo ou o caminho está errado), o site não ficará sem texto: o navegador mostrará Arial ou Georgia. Uma alternativa é obrigatória: sem ela, o navegador substituirá pela fonte padrão do sistema, geralmente Times New Roman, e a tipografia desmorona-se.

Pronto. Uma fonte personalizada fica ligada sem plugins e serviços externos. A tipografia reside no seu servidor e não se quebrará se uma API de terceiros alterar os termos ou ficar indisponível.

Vídeo: configuração passo a passo num site real

Veja como todo o processo se desenrola num site WordPress real, desde a escolha de uma fonte até à sua aplicação nos cabeçalhos:

O vídeo mostra ambos os métodos: via plugin e via @font-face. É conveniente pausar e acompanhar. O vídeo está em inglês, mas o processo é visualmente claro mesmo sem áudio.

⁉️🤔 Perguntas frequentes

Quantos tipos de letra personalizados posso adicionar a um site?

Não mais do que dois: um para títulos, outro para texto corrente. Cada tipo de letra inclui vários ficheiros de peso, de 30 a 100 KB cada. Dois tipos de letra acrescentarão um volume percetível ao carregamento da página. Um terceiro irá piorar notoriamente a velocidade, especialmente em ligações móveis lentas.

É obrigatório criar um tema filho para o @font-face?

Formalmente, não: pode inserir o @font-face diretamente no style.css do tema principal. Mas após a próxima atualização do tema, todas as edições desaparecerão. Um tema filho resolve isto de uma vez por todas. Se ainda não criou um, o nosso guia de tema filho para WordPress acompanha-o da instalação ao primeiro resultado.

Que formato de ficheiro escolher: WOFF, WOFF2 ou TTF?

WOFF2, como prioridade. Comprime um tipo de letra consideravelmente mais do que o WOFF e é suportado por todos os navegadores modernos. WOFF, como alternativa para versões mais antigas de navegadores. Ligue TTF e OTF apenas se o tipo de letra não estiver disponível em formatos web: não são comprimidos e pesam o dobro. A ordem em src é sempre: WOFF2, depois WOFF.

Porque é que o tipo de letra não aparece após a instalação?

Três causas comuns. Primeira: o caminho para o ficheiro em url() está errado, verifique se o caminho é construído a partir do style.css, não da raiz do site. Segunda: a cache do navegador está a reter CSS antigo, abra o site em modo anónimo ou limpe a cache com Ctrl+F5. Terceira: conflito com um tema que substitui font-family com prioridade mais alta, verifique no inspetor qual o seletor CSS que está realmente a ser aplicado ao texto.

Preciso de especificar format() no src?

Formalmente, o navegador determina o formato por si próprio a partir dos cabeçalhos do ficheiro. Mas format('woff2') explícito acelera a seleção: o navegador não descarrega um ficheiro que definitivamente não suporta. Portanto, especifique-o sempre. Esta é uma recomendação da especificação CSS Fonts Level 4.

Como verifico se o tipo de letra está a ser carregado do meu servidor e não externamente?

Abra as DevTools (F12), separador Rede, filtro Fontes, atualize a página. A lista deve conter apenas ficheiros do seu domínio. Se vir fonts.googleapis.com ou fonts.gstatic.com, os Google Fonts estão a ser carregados externamente. Para conformidade com o RGPD, mova-os para alojamento local via Fonts Plugin Pro ou descarregue manualmente e ligue via @font-face.

Qual o método de ligação de tipos de letra a escolher?

Ambos os métodos funcionam de forma fiável. A escolha depende do que é mais importante para si: rapidez de configuração ou controlo sobre cada byte.

Ao instalar um tipo de letra pela primeira vez e não querer mexer em código, escolha Use Any Font. Carregou o ficheiro, atribuiu aos títulos, está feito. A versão gratuita é suficiente para um tipo de letra de marca nos títulos.

Se precisar de acesso ao catálogo do Google Fonts com pré-visualização ao vivo no personalizador, escolha Fonts Plugin. A versão gratuita é suficiente para a maioria das tarefas, a Pro só é necessária para alojamento local dos Google Fonts ao abrigo do RGPD.

Se já trabalha com um tema filho e está habituado a editar CSS manualmente, escolha @font-face. Zero dependências externas, controlo total e, após a configuração, não pensa mais em tipografia durante anos. As atualizações do tema não afetarão os tipos de letra, que residem no seu tema filho como parte do CSS.

Comece com um plugin: são 2 minutos e sem riscos. Que tipo de letra está atualmente no seu site, o padrão do tema ou já ligou um personalizado?