Como adicionar fontes personalizadas no WordPress: guia completo

Existem várias formas de deixar seu site WordPress mais atraente, e uma delas é usando fontes personalizadas.

Explico: apesar de o WordPress oferecer algumas opções de fontes por conta própria, elas podem ser limitadas e variar de acordo com o tema que você usa. 

É exatamente para isso que estamos aqui. Neste artigo, você vai aprender passo a passo como adicionar fontes personalizadas no WordPress para dar um toque único ao seu site. Boa leitura!

Onde baixar fontes para WordPress?

Existem muitos sites onde você pode encontrar fontes gratuitas para a web, e o Font Squirrel é um dos mais populares. Lá, você encontra fontes livres para uso comercial com facilidade. Outra opção muito conhecida é o Google Fonts, que oferece mais de 900 famílias de fontes. A Adobe também disponibiliza uma grande coleção através do Edge Web Fonts.

Se você busca fontes premium, o Envato Elements é uma ótima escolha, com mais de 28 mil opções para você explorar.

Para quem quer fontes mais voltadas para uso pessoal, vale a pena conferir sites como Fonts.com, DaFont e 1001 Free Fonts.

Convertendo fontes para um formato compatível com a web

Vale lembrar que nem todos os navegadores suportam todos os tipos de fontes personalizadas. Porém, mesmo que a fonte que você escolheu não seja suportada, é possível convertê-la para um formato compatível.

Antes de fazer essa conversão, vamos conhecer os principais formatos de fonte:

• OpenType (OTF) – são as fontes web mais usadas e uma marca registrada da Microsoft. Funcionam bem na maioria dos navegadores.
• TrueType (TTF) – criadas pela Microsoft e Apple na década de 1980, são amplamente usadas tanto no Windows quanto no macOS.
• Web Open Font Format (WOFF) – formato bastante utilizado em sites e recomendado pelo World Wide Web Consortium (W3C).
• WOFF 2.0 – uma versão melhorada do WOFF 1.0, com compressão mais eficiente. Não é suportado pelo Safari e Internet Explorer, mas funciona bem no Chrome, Firefox e Opera.
• Embedded OpenType (EOF) – uma versão mais compacta do OTF usada para fontes incorporadas em páginas web, suportada pela maioria dos navegadores.

Se você não tem certeza se sua fonte base tem suporte nos navegadores mais populares, pode usar o Web Font Generator. Essa ferramenta facilita a conversão de quase qualquer fonte para um formato amigável à web. O processo é simples e não precisa sequer de login:

1. Acesse o Webfont Generator.
2. Clique no botão Upload Fonts e escolha a fonte que deseja converter.
3. Marque a caixa na seção Agreement para confirmar que a fonte pode ser legalmente usada na web.
4. Clique no botão Download Your Kit e salve o arquivo .zip em seu computador.

5. Dentro do arquivo compactado, você vai encontrar as fontes nos formatos WOFF e WOFF 2.0, além dos arquivos CSS e uma página demo em HTML.

Como adicionar fontes personalizadas no WordPress

Você pode adicionar fontes personalizadas no WordPress de duas formas: manualmente ou usando plugins. Vamos explicar o passo a passo para ambos os métodos.

Como adicionar fontes ao WordPress manualmente

Se você prefere não sobrecarregar seu WordPress com plugins, pode adicionar as fontes manualmente. Para isso, basta enviar o arquivo da fonte para a sua conta de hospedagem (ou para o serviço que você usa) e editar o arquivo CSS do seu tema. Veja como: 

1. No seu computador, salve ou localize o arquivo da fonte que você deseja usar e extraia o arquivo .zip, se necessário.
2. Faça o upload do arquivo da fonte no diretório wp-content/themes/seu-tema/fonts. Se essa pasta fonts não existir, crie uma. Você pode usar um cliente FTP, como o FileZilla, ou o Gerenciador de arquivos da Hostinger para essa tarefa. Em nosso exemplo, fizemos o upload da fonte AguafinaScript-Regular.ttf usando o Gerenciador de Arquivos do hPanel.

3. Em seguida, entre no painel administrativo do WordPress, vá em Aparência → Editor de arquivos do tema e abra o arquivo style.css. Role a tela para baixo e adicione o seguinte código: 

@font-face {  font-family: Aguafina Script-Regular;  src: url(http://test-site.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf);  font-weight: normal;  }

4. Pressione o botão Atualizar arquivo para salvar suas alterações.

A regra @font-face faz o navegador carregar a fonte quando alguém visita seu site, mas ainda não define onde ela será usada.

Para aplicar a fonte a um elemento específico — por exemplo, o título do site — adicione o código abaixo no mesmo arquivo style.css:

.site-title { 
font-family: "Aguafina Script-Regular", Arial, sans-serif; 
}

Aqui está uma visualização do resultado final:

Como adicionar fontes personalizadas no WordPress usando um plugin

Instalar um plugin para adicionar fontes personalizadas ao WordPress é provavelmente a maneira mais simples de realizar a tarefa. Aqui estão algumas das opções mais populares:

WP Google Fonts

O WP Google Fonts permite usar fontes personalizadas e aplicá-las a elementos CSS específicos. Basta instalar o plugin pela biblioteca do WordPress e acessar o painel de controle do Google Fonts no seu dashboard. Lá você escolhe as fontes e ajusta configurações como estilo e onde aplicar.

Easy Google Fonts

Com o Easy Google Fonts, você pode usar qualquer tema e visualizar as fontes em tempo real, sem precisar saber programar. 

Após instalar e ativar o plugin, acesse Configurações → Google Fonts para gerenciar as fontes. Quer editar a tipografia direto no tema? Entre no Personalizador em Aparência → Personalizar, e vá até a seção Tipografia para fazer ajustes em qualquer parte do site.

Use Any Font

O Use Any Font é outro plugin ótimo para adicionar várias fontes ao seu site. Depois de instalado, você cria uma chave API gratuita e verifica o plugin no botão Verify. 

Com isso, é possível fazer upload de fontes nos formatos TTF, OTF e WOFF. Também dá para aplicar as fontes a elementos personalizados do site.

Custom Fonts

O Custom Fonts permite que você hospede suas fontes personalizadas localmente no seu servidor, o que melhora a velocidade do site ao reduzir as requisições externas. Além disso, oferece a flexibilidade de fazer upload de fontes como .ttf ou .otf e escolher entre uma vasta coleção de fontes do Google, mantendo total controle sobre seu uso. 

Conclusão

Agora você sabe como baixar e converter fontes para um formato amigável para a web — e também aprendeu duas maneiras simples de adicionar fontes personalizadas no WordPress. Independentemente da fonte escolhida, certifique-se de que ela combine com o estilo e o tema do seu site.

Se tiver dúvidas sobre como adicionar fontes no WordPress, deixe seu comentário abaixo. Para questões gerais sobre o CMS, confira nosso guia geral do WordPress.

Como adicionar fontes personalizadas no WordPress: perguntas frequentes

Agora que você sabe como adicionar fontes personalizadas no WordPress, aqui estão algumas perguntas frequentes sobre o assunto.

Todo o conteúdo dos tutoriais deste site segue os rigorosos padrões editoriais e valores da Hostinger.