Você deseja adicionar fontes personalizadas no WordPress? As fontes personalizadas permitem que você use uma bela combinação de diferentes fontes em seu site para melhorar a tipografia e a experiência do usuário.

Além de ter uma boa aparência, as fontes personalizadas também podem ajudar a melhorar a legibilidade, criar uma imagem de marca e aumentar o tempo que os usuários passam no seu site.

Neste artigo, mostraremos como adicionar fontes personalizadas no WordPress usando Google Fonts, TypeKit e o método CSS3 @ Font-Face.

Antes de ver como adicionar fontes personalizadas no WordPress, vamos dar uma olhada em como encontrar fontes personalizadas que você pode usar.

Como encontrar fontes personalizadas para usar no WordPress

As fontes costumavam ser caras, mas não são mais. Há muitos lugares para encontrar ótimas fontes da web gratuitas, como Google Fonts , Adobe Fonts , FontSquirrel e fonts.com.

Se você não sabe como misturar e combinar fontes, tente o Font Pair. Ajuda os designers a combinar belas fontes do Google.

Ao escolher suas fontes, lembre-se de que usar muitas fontes personalizadas tornará seu site mais lento. É por isso que você deve selecionar duas fontes e usá-las em todo o design. Isso também trará consistência ao seu design.

Adicionar fontes personalizadas no WordPress a partir do Google Fonts

O Google Fonts é a maior, gratuita e mais comumente usada biblioteca de fontes entre os desenvolvedores de sites. Existem várias maneiras de adicionar e usar Google Fonts no WordPress.

Método 1: Adicionar fontes personalizadas usando o plugin Easy Google Fonts

Se você deseja adicionar e usar Google Fonts em seu site, este método é de longe o mais fácil e recomendado para iniciantes.

A primeira coisa que você precisa fazer é instalar e ativar o plugin Easy Google Fonts . Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin no WordPress.

Após a ativação, você pode ir para a página Aparência » Personalizar. Isso abrirá a interface do personalizador de tema ao vivo, onde você verá a nova seção “Typography”.

Clicar em “Typography” irá mostrar diferentes seções do seu site onde você pode aplicar o Google Fonts. Basta clicar em Typography » Default Typography para ver as seções e escolher uma que deseja editar.

Ao clicar em uma dessas seções, você vera a opção de “Font Family”, você pode escolher qualquer fonte do Google que deseja usar em seu site. Você também pode escolher o estilo da fonte, tamanho da fonte, preenchimento, margem e muito mais.

Dependendo do seu tema, o número de seções aqui pode ser limitado e você pode não ser capaz de alterar diretamente a seleção da fonte para muitas áreas diferentes do seu site.

Para corrigir isso, o plugin também permite que você crie seus próprios controles de fontes e os use para alterar as fontes de qualquer área do seu site.

Primeiro, você precisa visitar a página Configurações » Easy Google Fonts e fornecer um nome para o controle de fonte. Use algo que o ajude a entender rapidamente onde você usará esse controle de fonte.

Em seguida, clique no botão “Create Font Control” e será solicitado que você insira os seletores CSS.

Você pode adicionar elementos HTML que deseja direcionar (por exemplo, h1, h2, p, blockquote) ou usar classes CSS.

Você pode usar a ferramenta Inspecionar em seu navegador para descobrir quais classes CSS são usadas pela área específica que deseja alterar.

Agora clique no botão “Save Font Control” para armazenar suas configurações. Você pode criar quantos controladores de fonte precisar para as diferentes seções do seu site.

Para usar esses controladores de fonte, você precisa acessar Aparência » Personalizar e clicar na guia “Typography”.

Na guia Typography, você verá agora uma opção “Theme Typography” também. Clicar nele irá mostrar seus controles de fonte personalizados que você criou anteriormente.

Agora você pode apenas clicar no controle de fonte para selecionar as fontes e a aparência desse controle. Não se esqueça de clicar no botão salvar ou publicar para salvar suas alterações.

Método 2: adicionar manualmente fontes do Google no WordPress

Este método requer que você adicione código aos seus arquivos de tema do WordPress.

Primeiro, visite a biblioteca de fontes do Google e selecione uma fonte que deseja usar. Em seguida, clique no botão de uso rápido abaixo da fonte “Select this style”:

Na página da fonte, você verá os estilos disponíveis para aquela fonte. Selecione os estilos que deseja usar em seu projeto e clique no botão da barra lateral na parte superior.

Em seguida, você precisará alternar rolar na barra lateral até a seção “Use on the web” para copiar o código de incorporação.

Existem duas maneiras de adicionar esse código ao seu site WordPress.

Primeiro, você pode simplesmente editar o arquivo header.php do seu tema e colar o código antes da tag <body>.

No entanto, se você não está familiarizado com a edição de código no WordPress, pode usar um plugin para adicionar esse código.

Basta instalar e ativar o plugin Header Footer Code Manager. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress .

Após a ativação, você precisa visitar a página Painel do WordPress » HFCM » Add New:

Nomeie o snippet, por exemplo: Fonte do Google.

Você pode deixar as configurações padrão, conforme a imagem abaixo:

Cole o código gerado pelo Google Fonts na área onde está escrito Snippet/Code.

Não se esqueça de clicar no botão “Salvar” para armazenar suas alterações.

O plugin começará a carregar o código de incorporação da fonte do Google em todas as páginas do seu site.

Você pode usar essa fonte na folha de estilo CSS do seu tema assim:

.h1 site-title { 
font-family: 'Open Sans', Arial, sans-serif; 
}

Para obter instruções mais detalhadas, consulte nosso guia sobre como adicionar fontes do Google em temas WordPress.

Adicionando fontes personalizadas no WordPress usando Adobe Fonts

O Adobe Fonts é outro repositório gratuito e premium para fontes incríveis que você pode usar em seus projetos de design. Eles têm uma assinatura paga, bem como um plano gratuito limitado que você pode usar.

Basta se inscrever em uma conta Adobe Fonts e visitar a seção de procurar fontes. A partir daqui, você precisa clicar no </> botão para selecionar uma fonte e criar um projeto.

Na próxima tela clique no botão “Ok”

Em seguida, de um nome ao projeto e clique e um botão “CRIAR”:

Em seguida, você verá o código incorporado com o ID do seu projeto. Também mostrará como usar a fonte CSS no seu tema.

Você precisa copiar e colar este código dentro da seção <head> do seu site.

Existem duas maneiras de adicionar esse código ao seu site WordPress.

Primeiro, você pode simplesmente editar o arquivo header.php do seu tema e colar o código antes da <body>tag.

No entanto, se você não está familiarizado com a edição de código no WordPress, pode usar um plugin para adicionar esse código.

Basta instalar e ativar o plugin Header Footer Code Manager.

Após a ativação, você precisa visitar a página Painel do WordPress » HFCM » Add New:

Nomeie o snippet, por exemplo: Fonte da Adobe.

Você pode deixar as configurações padrão, conforme a imagem abaixo:

Cole o código gerado pelo Adobe Fonts na área onde está escrito Snippet/Code.

Não se esqueça de clicar no botão “Salvar” para armazenar suas alterações.

Isso é tudo, agora você pode usar a Adobe Fonts que selecionou na folha de estilo CSS do seu tema WordPress desta forma:

h1 .site-title {
font-family: gilbert, sans-serif;
}

Para obter instruções mais detalhadas, verifique nosso tutorial sobre como adicionar uma tipografia incrível no WordPress usando Adobe Fonts.

Adicionando fontes personalizadas no WordPress usando CSS3 @ font-face

A maneira mais direta de adicionar fontes personalizadas no WordPress é adicionando as fontes usando o @font-face método CSS3 . Este método permite que você use qualquer fonte que desejar em seu site.

A primeira coisa que você precisa fazer é baixar a fonte desejada em um formato da web. Se você não tiver o formato da web para sua fonte, poderá convertê-la usando o gerador FontSquirrel Webfont.

Assim que tiver os arquivos da webfont, você precisará carregá-los em seu servidor de hospedagem WordPress.

O melhor lugar para carregar as fontes é dentro de uma nova pasta de “fontes” no seu tema ou diretório do tema filho.

Você pode usar o FTP ou o gerenciador de arquivos do seu cPanel para fazer o upload da fonte.

Depois de carregar a fonte, você precisa carregá-la na folha de estilo CSS do seu tema usando a regra CSS3 @ font-face como esta:

@font-face {
font-family: Arvo;
src: url(http://www.exemplo.com.br/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}

Não se esqueça de substituir a família de fontes e o URL pelos seus.

Depois disso, você pode usar essa fonte em qualquer lugar da folha de estilo CSS do seu tema, desta forma:

.h1 site-title {
font-family: "Arvo", Arial, sans-serif;
}

Carregar fontes diretamente usando CSS3 @ font-face nem sempre é a melhor solução. Se você estiver usando uma fonte do Google Fonts ou Adobe Fonts, é melhor servir a fonte diretamente de seu servidor para obter um desempenho ideal.

Isso é tudo, esperamos que este artigo tenha ajudado você a adicionar fontes personalizadas no WordPress.