Skip to content

Tudo para WordPress, desenvolvimento web — e não só

🔤 Tipos de letra personalizados para um site WordPress: um guia passo a passo 2026

🔤 Tipos de letra personalizados para um site WordPress: um guia passo a passo 2026

O tipo de letra padrão denuncia um site WordPress à primeira vista. Uma fonte de sistema grita «não configurei nada» mais alto do que qualquer template gratuito.

Mudar o tipo de letra demora dez minutos. Não precisa de ser um programador front-end, nem precisa de pagar. Os cinco métodos abaixo cobrem tudo: desde principiantes com receio de mexer no código até proprietários de sites que precisam de controlo total.

Compilámos métodos que funcionam em 2026. Da pior abordagem ainda recomendada em guias desatualizados até à forma canónica «à maneira do WordPress».

💡 Visão geral rápida:

  • Escolha um tipo de letra: Google Fonts (gratuito, mais de 1500 famílias), Adobe Fonts (subscrição Creative Cloud) ou carregue o seu próprio WOFF2 para o seu servidor.
  • Decida se precisa de um plugin (mais simples, interface no personalizador) ou da ligação manual via functions.php (mais limpo, mais rápido, sem dependência de código de terceiros).
  • Para o método manual: adicione wp_enqueue_style ao functions.php e font-family no CSS.
  • Para o método com plugin: instale o EasyFonts ou o Use Any Font, selecione uma família e guarde.
  • Teste o resultado em navegadores diferentes e em dispositivos móveis: cada tipo de letra adicional acrescenta 50 a 200 KB ao carregamento da página.

Porquê mudar os tipos de letra no seu site

O tipo de letra molda as primeiras impressões mais depressa do que as cores ou as imagens. Investigadores da Universidade de Michigan mostraram, já em 2008, que o texto composto num tipo de letra complexo é inconscientemente percebido como «difícil». Os leitores têm menos probabilidade de seguir instruções e sobrestimam o tempo necessário para concluir uma tarefa.

Serifado ou não serifado também importa. Os tipos serifados (Georgia, Merriweather) aumentam o tempo de leitura, mas reforçam a autoridade percebida. Os tipos não serifados (Roboto, Inter) aceleram a leitura e funcionam melhor em ecrãs de telemóvel. Isto não são suposições: uma revisão da investigação em psicologia da tipografia confirma o efeito na prática.

Num site WordPress, o tipo de letra certo resolve três problemas:

  • Reconhecimento da marca. Um tipo de letra único para títulos evita que o seu site pareça «apenas mais um blogue com um tema padrão».
  • Legibilidade. Tamanho, altura de linha e contraste adequados reduzem as taxas de rejeição.
  • Hierarquia visual. Tipos de letra diferentes para títulos e corpo de texto guiam o olhar do visitante.

Agora, vamos à prática.

Onde obter tipos de letra para WordPress

Existem três fontes: Google Fonts, Adobe Fonts e alojamento próprio. Vamos analisar cada uma.

Google Fonts: gratuito e sem necessidade de registo

A fonte mais óbvia. Mais de 1500 tipos de letra, licença aberta, cache através da CDN do Google. Adequado para 95% dos sites.

Aceda a fonts.google.com. A interface recebe-o com uma grelha de cartões que mostram uma amostra de cada tipo de letra.

Página inicial do Google Fonts com grelha de tipos de letra

Os filtros estão à esquerda. Pode filtrar por categoria (Serif, Sans Serif, Display, Handwriting, Monospace), idioma, número de estilos e peso. Os filtros aplicam-se instantaneamente e os resultados são atualizados sem recarregar a página.

Passe o cursor sobre um tipo de letra para ver um menu que permite alterar o texto de amostra. Introduza o seu próprio título ou parágrafo e veja como fica.

Pré-visualização do tipo de letra ao passar o cursor no Google Fonts

Clique em «View specimen» para abrir a página do tipo de letra com todos os estilos, tabela de glifos e amostras em diferentes tamanhos.

Página detalhada do tipo de letra no Google Fonts com todos os estilos

Se gostar de um tipo de letra, clique no sinal de mais vermelho no canto do cartão. O tipo de letra vai para o painel de coleção, na parte inferior do ecrã. Pode adicionar várias famílias: uma para títulos, outra para corpo de texto.

Painel de coleção com os tipos de letra selecionados no Google Fonts

Expanda o painel de coleção para ver os separadores «Embed» e «Customize».

Separador Incorporar com código para adicionar tipos de letra a um site

No separador «Customize», selecione os estilos de que precisa. Importante: não selecione tudo. Cada estilo é um ficheiro adicional que o navegador carrega. Para um site típico, Regular (400) e Bold (700) são suficientes, por vezes Itálico. O indicador de velocidade no canto superior direito mostra o impacto do tipo de letra no tempo de carregamento.

Separador Personalizar para selecionar estilos de tipo de letra no Google Fonts

Se o seu site usar um alfabeto não latino, selecione o conjunto de caracteres adequado no final da página. Para cirílico, é o Cyrillic.

Selecionar conjunto de caracteres de idioma para um tipo de letra no Google Fonts

Dois botões com setas no topo: o da esquerda partilha a coleção, o da direita transfere os ficheiros da fonte para o seu computador. Útil para o Photoshop ou se decidir alojar a fonte você mesmo.

Botões Partilhar coleção e Transferir tipos de letra no Google Fonts

Adobe Fonts (anteriormente Typekit)

Se tiver uma subscrição Creative Cloud, o Adobe Fonts dá acesso a tipos de letra profissionais como Futura, Minion Pro e Myriad. As fontes são ligadas via CSS, de forma semelhante ao Google Fonts. O plano gratuito do Creative Cloud inclui um conjunto básico, suficiente para a maioria dos projetos.

Fontes personalizadas em WOFF2

Comprou uma fonte licenciada ou transferiu uma gratuita do Font Squirrel? Converta para WOFF2 (formato moderno de fonte web, compressão Brotli, suportado por 97% dos navegadores) e carregue para o seu servidor. Vantagem: sem dependência de CDN de terceiros e em conformidade com o RGPD. Desvantagem: a fonte é carregada a partir do seu servidor, o que é inevitavelmente mais lento do que a CDN do Google.

5 Formas de adicionar tipos de letra personalizados ao WordPress

Existem exatamente cinco formas. Vamos da opção «não faça isto» ao método ideal para WordPress.

Método 1: CSS @import (não faça isto)

O Google Fonts oferece um separador @import com uma string CSS pronta a usar. Parece conveniente: copiar, colar, está feito.

Separador Importar no Google Fonts com código CSS pronto

Tecnicamente, o código vai no início do ficheiro style.css do seu tema filho:

1/*
2 Theme Name: Twenty Seventeen Child
3 Theme URI: https://wordpress.org/themes/twentyseventeen/
4 Template: twentyseventeen
5 Author: the WordPress team
6 Author URI: https://wordpress.org/
7 Version: 1.0
8*/
9
10@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
11
12/* additional CSS goes here */

Porque é que esta é a pior opção? O @import impede o navegador de carregar várias folhas de estilo em paralelo. O navegador descarrega o ficheiro CSS, vê o @import lá dentro e só depois vai buscar o tipo de letra. O carregamento sequencial em vez de paralelo significa 200 a 400 ms perdidos por cada tipo de letra. Em dispositivos móveis, isto é crítico.

Não use @import para tipos de letra. Nunca.

As bibliotecas de tipos de letra fornecem uma tag <link> para inserção no <head>. Pode colocá-la diretamente no header.php, o ficheiro de template que todos os temas WordPress têm.

A editar o header.php do tema WordPress para inserir tipos de letra

Coloque a <link> entre as tags <head> e </head>. Se estiver a trabalhar com um tema filho, copie o header.php do tema pai para o tema filho e edite-o lá.

Este método funciona, mas é frágil: as atualizações do tema irão sobrescrever as suas alterações se não estiver a usar um tema filho. Além disso, misturar conteúdo e código nos templates é uma má prática. Serve para uma experiência pontual, não para uso permanente.

Método 3: @font-face e alojamento próprio dos tipos de letra

Se o tipo de letra estiver no seu servidor, precisa de o declarar usando a diretiva @font-face na sua folha de estilo. Primeiro, envie os ficheiros do tipo de letra (WOFF2, WOFF) via FTP para a pasta do seu tema filho, por exemplo wp-content/themes/yourtheme-child/fonts/.

Depois adicione ao style.css:

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

O parâmetro font-display: swap é importante: diz ao navegador para mostrar primeiro o texto num tipo de letra do sistema e depois substituí-lo pelo tipo de letra personalizado assim que este for carregado. Sem isto, os visitantes veem um ecrã em branco enquanto o tipo de letra carrega.

Não se esqueça de substituir o nome e o caminho do tipo de letra. Se o seu ficheiro de origem for TTF ou OTF, converta para WOFF2 usando o conversor online Font Squirrel.

Este método dá controlo total, mas perde para o Google Fonts em velocidade: o seu servidor é quase de certeza mais lento do que a CDN do Google. Para sites com até 10.000 visitantes por mês, a diferença é impercetível. Para projetos de alto tráfego, é crítica.

Método 4: functions.php e wp_enqueue_style (a forma canónica do WordPress)

O método mais correto do ponto de vista da arquitetura do WordPress. Em vez de inserir código num template, faz o «enqueue» da folha de estilo com o tipo de letra através do hook wp_enqueue_scripts.

O código vai no ficheiro functions.php do tema ativo ou do tema filho. Aqui está um exemplo funcional para o Google Fonts:

1function techblog_add_google_fonts() {
2 wp_enqueue_style(
3 'techblog-google-fonts',
4 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Playfair+Display:wght@700&display=swap',
5 array(),
6 null
7 );
8}
9add_action( 'wp_enqueue_scripts', 'techblog_add_google_fonts' );

A função wp_enqueue_style recebe quatro parâmetros: um nome único (handle), o URL da folha de estilo, um array de dependências (vazio aqui) e a versão (null, o WordPress substituirá pela sua própria). O hook wp_enqueue_scripts garante que o código é executado no momento certo durante o carregamento da página.

Para tipos de letra da Adobe, usava-se anteriormente JavaScript e wp_enqueue_script. Agora, a Adobe Fonts mudou para uma abordagem CSS semelhante ao Google Fonts, pelo que o wp_enqueue_style cobre ambos os serviços.

Porque é que este é o melhor método manual:

  • Os tipos de letra não serão sobrescritos durante as atualizações do tema (se estiver num tema filho).
  • O WordPress gere a ordem de carregamento e resolve dependências.
  • O código fica isolado no functions.php, os templates permanecem limpos.
  • Outros plugins podem desativar ou modificar a sua chamada através de hooks padrão.

Método 5: plugin (se não quiser mexer em código)

Não se sente preparado para mergulhar no functions.php? Um plugin resolve o problema sem uma única linha de código.

Easy Google Fonts (exemplo visual, mas não para sites em produção)

O plugin de tipos de letra mais antigo no diretório do WordPress. Fornece uma interface no personalizador: selecione um tipo de letra, veja as alterações em tempo real, guarde.

A instalação é padrão: Plugins → Adicionar Novo → pesquisar «Easy Google Fonts» → InstalarAtivar.

Opção de tipografia no personalizador do WordPress após instalar o Easy Google Fonts

Após a ativação, aparece um novo item «Tipografia» em Aparência → Personalizar. Entre nele, selecione Tipografia Padrão e verá controlos de tipo de letra para parágrafos e cabeçalhos.

Controlos de tipo de letra no plugin Easy Google Fonts

Clique no menu suspenso ao lado do elemento que pretende alterar. Um menu expande-se:

Menu suspenso de seleção de tipo de letra no plugin Easy Google Fonts

A opção mais importante é Font Family. Aqui tem acesso a toda a biblioteca do Google Fonts (mais de 600 tipos de letra). As fontes estão agrupadas por categoria: serif, sans-serif, Display, Handwriting, Monospace. Pode pesquisar por nome.

Clique numa fonte e as alterações são imediatamente visíveis na pré-visualização à direita.

Pré-visualização em tempo real do tipo de letra selecionado no personalizador

A seguir vêm os ajustes finos. O separador Font Weight/Style controla o peso. Text Decoration adiciona sublinhado, rasurado ou linha superior. Text Transform altera a capitalização: maiúsculas, minúsculas ou primeira letra maiúscula.

No separador Appearance: cor da fonte, cor de fundo, tamanho, altura de linha e espaçamento entre letras.

Definições de aparência do texto no plugin Easy Google Fonts

O separador Positioning: margens, preenchimento, bordas, raio da borda e a propriedade display.

Definições de posicionamento do tipo de letra no plugin Easy Google Fonts

Quando terminar, clique em Save and Publish no topo.

Aviso sincero: o Easy Google Fonts não é atualizado desde 2020. No WordPress 6.4+, o plugin pode não funcionar. Alguns utilizadores queixam-se de que a opção «Typography» não aparece no personalizador. Estamos a mostrá-lo como ilustração da abordagem: a maioria dos plugins de fontes funciona através do mesmo mecanismo do personalizador.

O que fazer se a fonte não mudar

Alguns temas usam seletores CSS não padronizados. Um título pode não ser apenas <h1>, mas <h1 class="entry-title">, e o plugin «não vê» esse elemento.

Solução: crie o seu próprio controlo de fonte em Settings → Google Fonts.

A criar um controlo de tipo de letra personalizado nas definições do Easy Google Fonts

Associe o seletor CSS necessário ao novo controlo e ative a substituição forçada. Depois de guardar, o controlo aparecerá no personalizador ao lado dos padrão.

Plugins alternativos (atuais em 2026)

O Easy Google Fonts não é a única opção. Três alternativas ativas:

  • EasyFonts aloja Google Fonts localmente no seu servidor. Deteta automaticamente as fontes em uso, transfere-as e serve-as a partir do seu domínio. Mais rápido do que os pedidos CDN padrão, além de total conformidade com o RGPD. O mais leve dos três em termos de impacto no desempenho.
  • Use Any Font permite carregar as suas próprias fontes sem CSS. O plugin converte TTF/OTF/WOFF para formato web e aloja-o no seu servidor. Adequado para fontes comerciais adquiridas sob licença.
  • Fonts Plugin é um gestor alternativo do Google Fonts com pré-visualização no personalizador. Ao contrário do desatualizado Easy Google Fonts, é atualizado regularmente e testado com as versões atuais do WordPress.

Aplicar a fonte aos elementos do site

A fonte está ligada, mas ainda «no ar». Precisa de dizer ao navegador a que elementos a deve aplicar.

Aqui está o CSS básico para substituir a fonte dos títulos. Adicione-o através de Appearance → Customize → Additional CSS:

1h1,
2h2,
3h3,
4h4,
5h5,
6h6 {
7 font-family: 'Roboto', sans-serif;
8}

Para o corpo do texto:

1body,
2p,
3li {
4 font-family: 'Inter', sans-serif;
5}

Nuance importante: o nome da fonte em font-family deve corresponder exatamente à forma como a biblioteca a declara. O Google Fonts usa 'Roboto', enquanto o Adobe Fonts pode devolver 'open-sans' (sem espaço e sem aspas). Observe atentamente o código que o serviço fornece, e não o nome da fonte no site.

Pode adicionar este CSS de três formas: através do personalizador (a mais fácil, sobrevive a atualizações do tema), através do style.css do tema filho ou através do hook wp_head. Recomendamos a primeira.

⁉️🤔 Perguntas frequentes

Quantas fontes se podem adicionar a um site sem perder velocidade?

O ideal são duas famílias: uma para títulos, outra para o corpo do texto. Cada fonte adicional acrescenta um pedido HTTP e 50-200 KB de peso à página. Três fontes já é o limite máximo. E ligue apenas os estilos de que precisa: Regular (400) e Bold (700) pesam metade de um conjunto de 5-6 estilos.

Google Fonts ou Adobe Fonts: qual escolher?

Para 9 em cada 10 sites, Google Fonts. Gratuito, rápido (CDN da Google), mais de 1500 fontes, o cirílico está disponível em quase todos os tipos de letra populares. O Adobe Fonts faz sentido se já tem uma subscrição Creative Cloud e precisa de uma fonte comercial específica como Futura ou Minion Pro.

Posso usar um ficheiro TTF transferido do meu computador?

Pode, mas converta primeiro para WOFF2 (formato moderno comprimido para a web). Os ficheiros TTF não são comprimidos e ocupam significativamente mais espaço. O WOFF2 com compressão Brotli reduz o tamanho do ficheiro várias vezes. Conversor: Font Squirrel Webfont Generator.

Plugin ou functions.php: qual é mais fiável?

O functions.php é mais fiável para uso a longo prazo: sem dependências extra, o código é transparente, as atualizações de plugins não o afetam. Os plugins ganham em conveniência: 5 minutos contra meia hora a aprender hooks. Para um site de produção, escolha o wp_enqueue_style num tema filho. Para um protótipo rápido ou um site de cliente que precise de uma interface simples, use um plugin.

Porque é que a fonte parece diferente no telemóvel em relação ao computador?

Os navegadores móveis por vezes substituem as fontes do sistema ou renderizam o antialiasing de forma diferente. Além disso, os tamanhos de ecrã são diferentes: 16px no computador lê-se bem, mas num telefone pode ser demasiado grande. Solução: defina um tamanho relativo usando clamp() (por exemplo font-size: clamp(16px, 2.5vw, 20px)) e teste num dispositivo real, não num emulador.

Resumo final: o que usar no seu site em 2026

Se resumirmos tudo em cinco frases:

  • Google Fonts é a fonte de tipos de letra padrão. Suficiente para 95% dos projetos: rápido, gratuito, o cirílico está disponível em todo o lado.
  • functions.php + wp_enqueue_style é o melhor método manual. Limpo, sobrevive a atualizações do tema, o código é transparente.
  • O plugin EasyFonts funciona se quiser alojamento local das Google Fonts sem complicações de código. Mais rápido do que o CDN padrão e em conformidade com o RGPD.
  • Dois estilos por fonte, não mais: Regular e Bold. Cada estilo extra rouba 30-50 KB de carregamento.
  • WOFF2, não TTF: converta antes de enviar para o seu servidor. Poupa meio megabyte por página.

Mudar fontes é uma daquelas tarefas em que uma hora de configuração cuidadosa resulta em anos de retorno visual. Comece já: vá ao site do Google Fonts, encontre alguns tipos de letra para o seu projeto e experimente o método 4 da lista acima.