Tutorial

Adicionar Fonte Personalizada ao WordPress

Criando Websites, uso o Google Fonts sempre que posso, afinal são grátis, de boa qualidade e com dezenas de opções. Mas e quando o cliente escolhe uma fonte personalizada, geralmente através de uma designer, e paga por ela? Pode ter certeza que ele vai querer usá-la no site.

Quer aprender como um Desenvolvedor resolve a tarefa de adicionar fonte personalizada ao WordPress? Vem comigo!

O que é uma fonte personalizada?

Entenda o assunto principal para aprender em vez de apenas copiar código

Se quiser ir direto para os códigos, passe para a próxima seção clicando aqui.

Para todo website que é criado, é preciso escolher uma ou mais fontes para utilizar no texto. Cada uma terá um impacto e sensação diferente e, por isso, há diretrizes de como usá-las. Não abordarei este tema, pois é bem extensivo. Basta sabermos que há diferentes fontes e que muitas podem ser usadas gratuitamente, enquanto outras é preciso comprar. Você pode comprar uma fonte aleatoriamente em alguns sites ou trabalhar na identidade da marca junto a uma designer.

Utilizar fontes do Google Fonts é muito fácil. O próprio Google fornece um código para você copiar no cabeçalho do site. Às vezes, vem na própria configuração do tema pra facilitar ainda mais.

Em contrapartida, fontes personalizadas ou customizadas vêm em forma de um arquivo com extensão TTF no formato “*.ttf”. Jogar este arquivo dentro da pasta do site não é o bastante para fazer funcionar.

Agora que você já entendeu o problema, vamos à solução de adicionar fonte personalizada ao WordPress.

Como adicionar fonte personalizada ao WordPress

Desenvolvedores WordPress, mãos à obra!

Seu cliente deve fornecer um arquivo TTF se for uma fonte proprietária (paga). Se for grátis, você deve conseguir baixá-la sem muita dificuldade. De qualquer forma, você precisará ter o arquivo disponível. Para adicionar uma ou mais fontes personalizadas ao WordPress, vamos completar os x passos seguintes:

Criar kit webfont
Fazer upload do kit
Criar função para usar a fonte personalizada
Adicionar CSS no frontend

1. Criar kit webfont

Para concluir esta seção, você deve ter os arquivos de extensão .woff e .woff2, além do .ttf e uma stylesheet .css. Caso já tenha todos esses arquivos, pule agora para o passo 2.
Se você ainda não tem os arquivos supracitados, vá no site FontSquirrel.com e gere um kit de webfontes a partir de sua fonte .ttf ou .otf. Faça o download do kit gerado (arquivo .zip) e salve em uma pasta de fácil localização.

2. Fazer upload do Kit

Você já tem todos os arquivos necessários para a fonte funcionar na internet, então agora vamos upar estes arquivos para o seu servidor. Descompacte a pasta zipada com o kit de fontes de sua fonte personalizada. Utilizando o seu serviço de FTP crie uma pasta dentro de uploads chamada Fonte (ou o que fizer mais sentido para você). Faça o upload da pasta com todos os arquivos do webfont kit para o seu servidor na pasta que acabou de criar.

3. Criar função para usar a fonte personalizada

Adicione o css das fontes via hook wp_enqueue_scripts no functions.php do seu tema:

function racar_fonts() {
 wp_enqueue_style( 'racar-font-roboto-regular' , '/wp-content/uploads/racar-fonts/roboto_regular/stylesheet.css' );
 wp_enqueue_style( 'racar-font-roboto-bold' , '/wp-content/uploads/racar-fonts/roboto_bold/stylesheet.css' );
}
add_action( 'wp_enqueue_scripts' , 'racar_fonts' );

functions.php

4. Adicionar CSS no frontend

Você já criou o seu webfont kit, upou para o servidor, informou ao sistema onde buscar quando solicitada e agora só falta você exibir a fonte através de CSS.

body, h1, h2 , h3 {
    font-family: 'my-font';
}

style.css

Conclusão

Para adicionar uma fonte customizada no site WordPress, é preciso criar a webfont, colocar na pasta do site e indicar ao WordPress onde ela está para que seja utilizada.

Se você ainda tiver dúvidas ou se conseguiu fazer sem dificuldades, não hesite em comentar abaixo. Até a próxima!

Rafa Carvalhido

Rafa é Programador Web especializado em WordPress + WooCommerce e escritor nos tempos livres. Criação de sites, otimizações de velocidade e SEO, e criação de plugins são algumas de suas funções rotineiras que lhe permitem falar com propriedade quando o assunto é WordPress.

Next Como Esvaziar Carrinho do WooCommerce com 1 Clique »

Previous « Como iniciar projeto no workana

View Comments

Eduardo Verme says:

19 de novembro de 2020 at 10:49

PQP!!!!
Cara, muito obrigado! Eu estava a alguns dias já quase enlouquecendo, batendo a cabeça pra conseguir colocar uma fonte personalizada no meu wp em localhost com o font-face, que era a única solução que eu encontrava pela internet.
Hoje, já quase desistindo e indo instalar algum plugin, dou de cara com teu site e essa dica matadora ai! Só achei ela aqui!
Obrigado mais uma vez!!!!!!!
- Rafa Carvalhido says:
  
  19 de novembro de 2020 at 13:42
  
  Que maravilha saber que eu pude te ajudar! Sempre que precisar, estamos às ordens.