Como Adicionar Fontes Customizadas no WordPress, Elementor e CSS: Guia Completo

Você recebeu o arquivo da fonte que faz parte da identidade visual do cliente, mas ela não está disponível no Google Fonts? Calma! Neste guia completo, vou mostrar como resolver esse problema clássico do desenvolvimento web de forma simples e prática.

O Problema: Fontes Customizadas Fora do Google Fonts

É uma situação muito comum: o departamento de marketing ou o cliente envia a fonte oficial da marca, e quando você verifica, descobre que ela não está disponível no Google Fonts para ser linkada diretamente no projeto. E agora? Como usar essa fonte no site?

A boa notícia é que existem várias formas de adicionar fontes personalizadas em seus projetos, seja trabalhando com código puro, WordPress Gutenberg ou Elementor. Vou mostrar todas elas!

Solução 1: Adicionando Fontes Customizadas em Projetos com Código Puro (HTML/CSS)

Para projetos desenvolvidos em código puro, o processo é bem direto. Você vai usar a regra @font-face no CSS para importar a fonte.

Passo a passo:

1. Organize os arquivos da fonte

• Crie uma pasta chamada fonts ou assets/fonts no seu projeto
• Coloque os arquivos da fonte (.ttf, .woff, .woff2, .otf) nesta pasta

2. Configure o CSS Adicione o seguinte código no seu arquivo CSS principal:

@font-face {
  font-family: 'NomeDaFonte';
  src: url('fonts/nome-da-fonte.woff2') format('woff2'),
       url('fonts/nome-da-fonte.woff') format('woff'),
       url('fonts/nome-da-fonte.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

3. Use a fonte nos elementos Agora você pode aplicar a fonte em qualquer elemento:

h1, h2, h3 {
  font-family: 'NomeDaFonte', sans-serif;
}

p {
  font-family: 'NomeDaFonte', Arial, sans-serif;
}

Dica profissional:

Sempre inclua uma fonte de fallback (como Arial ou sans-serif) caso a fonte customizada não carregue por algum motivo.

Solução 2: Fontes Customizadas no WordPress Gutenberg (FSE)

Para quem trabalha com WordPress e utiliza o editor Gutenberg, a melhor opção é usar temas FSE (Full Site Editing). Esses temas não possuem limitações de edição e permitem adicionar fontes customizadas de forma nativa.

Como fazer:

1. Acesse o Editor de Site

• No painel do WordPress, vá em Aparência > Editor

2. Configure a tipografia

• Clique em Estilos (ícone de pincel)
• Acesse a seção de Tipografia
• Clique em “Gerenciar famílias de fontes”

3. Adicione a fonte customizada

• Clique em “Adicionar fonte”
• Faça o upload dos arquivos da fonte
• Configure as variantes (peso, estilo)

4. Aplique nos elementos

• Defina a fonte para títulos, parágrafos e outros elementos
• Salve as alterações

Temas não-FSE?

Se você está usando um tema WordPress tradicional (não-FSE), recomendo usar o plugin Fonts Plugin, que explicarei mais adiante na solução para Elementor Free.

Solução 3: Fontes Customizadas no Elementor PRO

O Elementor PRO oferece uma funcionalidade nativa chamada Custom Fonts, que torna o processo extremamente simples.

Passo a passo:

1. Acesse Custom Fonts

• No painel do WordPress, vá em Elementor > Custom Fonts

2. Adicione uma nova fonte

• Clique em “Add New”
• Dê um nome para identificar a fonte

3. Faça o upload dos arquivos

• Adicione os arquivos da fonte (.woff, .woff2, .ttf, .otf)
• Configure o peso da fonte (weight) se necessário
• Salve as alterações

4. Use no Elementor

• Abra qualquer página no Elementor
• Selecione um elemento de texto
• Na seção Typography, sua fonte customizada estará disponível na lista

Pronto! Agora você pode usar a fonte em qualquer elemento do Elementor.

Solução 4: Fontes Customizadas no Elementor Free

Se você usa a versão gratuita do Elementor, não tem acesso à funcionalidade Custom Fonts. Mas existe uma solução excelente: o plugin Fonts Plugin.

Como usar o Fonts Plugin:

1. Instale o plugin

• No painel do WordPress, vá em Plugins > Adicionar novo
• Busque por “Fonts Plugin” ou “Custom Fonts”
• Instale e ative o plugin

2. Configure a fonte

• Acesse o menu do plugin
• Clique em “Add Font”
• Faça o upload dos arquivos da fonte
• Configure nome e propriedades

3. Use no Elementor Free

• A fonte estará automaticamente disponível no Elementor
• Selecione qualquer elemento de texto
• Escolha sua fonte customizada na lista de Typography

Bônus: Use também no Gutenberg!

O Fonts Plugin também funciona perfeitamente com o Gutenberg, sendo uma ótima alternativa para temas WordPress que não são FSE.

Formatos de Fonte: Qual Usar?

Existem diferentes formatos de arquivo para fontes web. Aqui está um resumo:

• WOFF2: Formato mais moderno e compacto, melhor performance
• WOFF: Boa compatibilidade com navegadores mais antigos
• TTF/OTF: Formatos tradicionais, maior tamanho de arquivo
• EOT: Específico para Internet Explorer antigo (raramente necessário hoje)

Recomendação:

Use WOFF2 como primeira opção e inclua WOFF como fallback para garantir compatibilidade máxima.

Melhores Práticas para Performance

Ao adicionar fontes customizadas, considere estas dicas para manter a performance do site:

1. Otimize o carregamento

• Use apenas os pesos de fonte que realmente precisa
• Prefira WOFF2 para arquivos menores
• Considere usar font-display: swap para evitar FOIT (Flash of Invisible Text)

2. Hospede localmente

• Hospedar fontes no seu próprio servidor melhora a privacidade
• Reduz dependências externas
• Melhora o GDPR compliance

3. Subconjuntos de caracteres

• Se possível, use apenas os caracteres necessários
• Isso reduz drasticamente o tamanho dos arquivos

Checklist Final: Fontes Customizadas

Antes de finalizar seu projeto, verifique:

• [ ] Você tem permissão legal para usar a fonte no projeto?
• [ ] Os arquivos estão nos formatos corretos (WOFF2, WOFF)?
• [ ] A fonte está carregando corretamente em todos os navegadores?
• [ ] Você definiu fontes de fallback apropriadas?
• [ ] O site continua com boa performance após adicionar as fontes?
• [ ] A fonte está sendo aplicada em todos os elementos desejados?

Conclusão: Fontes Customizadas Não São Mais um Problema

Como você viu, adicionar fontes customizadas em seus projetos web não precisa ser complicado. Seja trabalhando com código puro, WordPress Gutenberg ou Elementor (Free ou PRO), existe sempre uma solução prática e eficiente.

O importante é escolher o método adequado para o seu projeto e seguir as boas práticas de performance para garantir que o site continue carregando rapidamente.

Assista ao tutorial completo em vídeo

Quer ver tudo isso na prática? Assisti ao vídeo completo no canal Suprema UX, onde mostro passo a passo cada uma dessas soluções em ação:

👉 Clique aqui para assistir no YouTube

Qual sua próxima bucha?

Conte nos comentários do vídeo ou aqui no blog: qual problema do dia a dia de desenvolvimento você gostaria de ver resolvido no próximo episódio da série “Resolvendo Buchas”?

---

Sobre o autor: Daniel Carvalho é criador de conteúdo no canal Suprema UX, onde compartilha soluções práticas para desenvolvedores web e designers. Especializado em WordPress, Elementor e desenvolvimento front-end.