Como adicionar fontes personalizadas do WordPress (e escolher fontes que combinem)

Procurando uma maneira de adicionar suas próprias fontes WordPress personalizadas ao seu site?

Seu tema WordPress provavelmente vem com seu próprio conjunto de fontes para você escolher, mas as opções podem ser bastante limitadas, então é totalmente compreensível que você queira adicionar suas próprias fontes WordPress.

Neste post, você aprenderá como fazer upload e usar qualquer fonte no WordPress por meio de alguns métodos diferentes.

Caso você não esteja familiarizado com a ideia de usar suas próprias fontes do WordPress, começaremos com uma introdução rápida sobre onde encontrar fontes personalizadas e como emparelhá-las.

Em seguida, mostraremos como adicionar fontes personalizadas do WordPress de:

• Fontes do Google
• Fontes Adobe (Typekit)
• Literalmente em qualquer outro lugar! (enviando um arquivo de fonte e usando CSS3 @ font-face)

Clique neste link para ir direto para os tutoriais.

Onde encontrar fontes personalizadas para WordPress

O lugar mais conhecido para encontrar fontes personalizadas do WordPress é definitivamente o Google Fonts. No Google Fonts, você encontrará um repositório com mais de 900 fontes, todas gratuitas e muito fáceis de integrar ao seu site WordPress graças ao CDN do Google.

Depois do Google Fonts, outra opção conhecida é o Adobe Fonts ( anteriormente chamado de Typekit ). As fontes Adobe são incluídas sem custo adicional como parte da assinatura do Creative Cloud da Adobe, mas não estão disponíveis para não assinantes.

Finalmente, você pode encontrar muitos outros sites que agregam fontes gratuitas e premium. Dois dos nossos favoritos são:

• Font Squirrel - coleta fontes que são 100% gratuitas para uso comercial.
• Fonts.com - tem uma grande coleção de fontes premium.

Como emparelhar fontes para que seu site tenha uma aparência incrível

Normalmente, você não usará uma única fonte em seu site WordPress. Em vez disso, a maioria dos sites usa pares de fontes para criar um design mais interessante e ajudar a diferenciar o conteúdo.

No entanto, você não quer apenas juntar duas fontes aleatoriamente - isso pode não parecer muito bom.

Em vez disso, você precisa de duas fontes que funcionem juntas, o que, se você não for um designer , pode ser difícil de descobrir.

Para ajudar, existem vários sites excelentes que irão sugerir pares de fontes para você. Por exemplo, se você encontrar uma fonte que absolutamente ame , você pode usar um desses sites para encontrar um par para ela. Alguns de nossos favoritos são:

• FontPair
• Fontjoy
• Typ.io

Embora não haja nenhuma regra dizendo que você só pode usar duas fontes, você deve ser cauteloso ao usar muitas fontes do WordPress. Além do potencial de criação de um design caótico, o uso de muitas fontes personalizadas também pode diminuir o tempo de carregamento do seu site.

Como adicionar fontes personalizadas do WordPress: guias passo a passo

Agora, a parte divertida - veja como começar a usar suas próprias fontes personalizadas do WordPress.

Existem alguns caminhos que você pode seguir aqui, dependendo de onde deseja obter suas fontes.

Aqui estão os três métodos que abordaremos. Novamente, você pode clicar em um link para ir direto para um tutorial específico:

1. Adicionar Google Fonts no WordPress (plug-in, manual ou métodos de hospedagem local)
2. Adicionar fontes Adobe (Typekit) no WordPress
3. Use CSS3 @ font-face para fazer upload e adicionar qualquer fonte no WordPress

Como adicionar fontes do Google ao WordPress

Como o Google Fonts é a fonte mais popular de fontes personalizadas do WordPress, cobriremos três maneiras diferentes de adicionar Google Fonts ao WordPress:

1. Adicionar Google Fonts do CDN do Google com um plug-in
2. Adicionar manualmente fontes do Google a partir do CDN do Google
3. Hospedar Google Fonts localmente no WordPress com um plug-in

Como adicionar fontes do Google no WordPress usando um plug-in

Por causa da popularidade do Google Fonts, você pode encontrar vários plug-ins de qualidade que tornam super simples adicionar Google Fonts ao WordPress, sendo o nosso favorito o Easy Google Fonts porque:

• Livre
• Leve
• Fácil de usar

Depois de instalar e ativar o plug-in, vá para Aparência → Personalizar no painel do WordPress para iniciar o Customizador do WordPress em tempo real.

Em seguida, clique na opção Tipografia para escolher as opções do Google Fonts:

A partir daí, você pode usar as opções para escolher uma fonte personalizada para cada elemento em seu site:

Por exemplo, aqui está o que parece mudar a fonte do parágrafo:

Além de escolher a fonte em si, o plug-in também permite que você personalize:

• Espessura da fonte
• Decoração de texto
• Cores

Se você conhece um pouco de CSS, também pode usar o recurso de controles de fonte do plugin para agrupar certos elementos. Por exemplo, você pode combinar seletores de cabeçalho para direcionar todos os seus cabeçalhos de uma vez.

Para configurar isso, vá para Configurações → Google Fonts e crie um novo controle de fonte para selecionar seletores CSS específicos:

Como adicionar fontes do Google no WordPress sem um plug-in

Como o Google hospeda todas as suas fontes em seu próprio CDN, também é muito fácil adicionar manualmente o Google Fonts ao WordPress.

Basicamente, em vez de precisar fazer upload dos arquivos de fonte para o seu servidor, você pode apenas vincular ao CDN hospedado do Google e o Google cuidará do fornecimento das fontes para você.

Algumas pessoas não gostam de fazer isso por motivos de desempenho - compartilharei uma maneira de hospedar localmente Google Fonts na próxima seção, se desejar .

Para começar, você precisa usar o site do Google Fonts para escolher a fonte que deseja adicionar.

Para este exemplo, digamos que você deseja usar Roboto .

Vá para a página da fonte e clique em + Selecionar esta fonte :

Isso adicionará uma janela no canto inferior direito. Clique para expandir essa janela.

Se você quiser escolher espessuras de fonte adicionais ( por exemplo, para negrito e itálico ), você pode ir para a guia Personalizar . Para um bom equilíbrio entre usabilidade e desempenho, recomendamos a escolha de três pesos de fonte no máximo absoluto:

• Regular
• itálico
• Negrito

Você pode até usar menos se quiser o melhor desempenho .

Depois de fazer suas escolhas, volte para a guia Incorporar e copie o código da fonte incorporada :

Em seguida, você precisa adicionar este código à seção <head> do seu tema WordPress. Você pode fazer isso:

• Editar diretamente o arquivo header.php do seu tema filho ( certifique-se de usar um tema filho - caso contrário, suas fontes personalizadas irão desaparecer quando você atualizar o seu tema )
• Usando um plugin gratuito como inserir cabeçalhos e rodapés

Depois de adicionar o código, você pode começar a usar o Google Fonts em seu CSS.

Se você voltar ao site do Google Fonts, o Google irá realmente lhe dizer as regras CSS que você precisa usar:

Por exemplo, para que suas tags h2 usem sua nova fonte Roboto, você pode ir para Aparência → Personalizar → CSS adicional e adicionar o seguinte trecho:

h2 {

família da fonte: 'Roboto', sans-serif;

}

Como hospedar fontes do Google localmente no WordPress com um plug-in

Este é o método final para o Google Fonts!

Algumas pessoas preferem hospedar fontes do Google localmente, em vez de carregá-las do CDN do Google. Ou seja, em vez de carregá-los de um link como “https://fonts.googleapis.com/css?family=Roboto:400,700”, você pode hospedar os arquivos em seu próprio servidor.

A maneira mais fácil de fazer isso é com um plugin gratuito chamado CAOS for Webfonts.

Depois de instalar e ativar o plugin, você pode ir para Configurações → Otimizar Webfonts para escolher quais fontes deseja baixar para o seu servidor:

Depois de fazer isso, você pode começar a usar a (s) fonte (s) em seu CSS ( como se estivesse seguindo o método anterior ).

Como adicionar fontes Adobe (Typekit) no WordPress

Se quiser usar Adobe Fonts no WordPress, você pode basicamente seguir as mesmas etapas do método manual Google Fonts. Lembre-se de que o serviço Adobe Fonts está disponível apenas como parte da assinatura da Creative Cloud .

Para começar, você precisará usar o site Adobe Fonts para escolher suas fontes e criar um projeto da web ( instruções detalhadas aqui ).

Na janela Adicionar fontes ao projeto da Web , você pode escolher quais fontes incluir:

Em seguida, a Adobe fornecerá a você um código de incorporação, assim como o Google Fonts:

Pegue esse código embed e adicione-o ao seu site usando o arquivo header.php do tema filho ou um plugin como Insert Headers and Footers.

Depois de vincular ao arquivo CSS, você pode usar o CSS que a Adobe fornece para começar a aplicar a fonte aos seletores CSS em seu site:

Como usar @ font-face no WordPress

Finalmente, o último método que mostraremos é como usar @ font-face no WordPress. O bom desse método é que ele funcionará literalmente com qualquer arquivo de fonte de qualquer fonte .

Basicamente, contanto que você possa fazer o download do arquivo de fonte e tenha os direitos para usá-lo, CSS3 @ font-face fará isso.

Para começar, baixe o arquivo de fonte de sua fonte preferida. Para este exemplo, usaremos uma fonte gratuita do Font Squirrel chamada Alex Brush .

Se possível, tente baixar o arquivo nos .woff ou arquivo .woff2 formatos para a melhor compatibilidade cross-browser. Se isso não for possível, você pode baixar sua fonte em um formato diferente e, em seguida, usar a ferramenta FontSquirrel Webfont Generator para convertê-la em .woff :

Em seguida, conecte-se ao servidor do seu site WordPress via FTP ou cPanel File Manager. Então…

• Crie uma nova pasta chamada fonts dentro do seu tema ativo ou diretório do tema filho ( alguns temas podem já ter uma pasta de fontes . Se for esse o caso, você pode pular esta ).
• Carregue o arquivo de fonte para a pasta de fontes . Você pode fazer upload dos formatos .woff e .woff2

Depois de fazer upload dos arquivos, vá para Aparência → Personalizar → CSS adicional no painel do WordPress.

Primeiro, você precisa usar @ font-face para adicionar sua fonte ...

Para fazer isso, insira o nome da sua fonte como a família da fonte e adicione o URL direto ao arquivo da fonte em seu servidor como o URL . Esta é a aparência de nosso exemplo AlexBrush:

@Tipo de letra {

família da fonte: AlexBrush;

src: url (http://easy-whale.w6.wpsandbox.pro/wp-content/themes/twentynineteen/fonts/alexbrush-regular-webfont.woff);

peso da fonte: normal;

}

Depois de fazer isso, você pode usar CSS para aplicar sua família de fontes ( pelo nome que você registrou com @ font-face ). Por exemplo, aqui está o que parece usar a fonte AlexBrush para cabeçalhos <h2>:

E é isso! Você pode usar este método CSS3 @ font-face para literalmente qualquer arquivo de fonte.

Considerações finais sobre fontes personalizadas do WordPress

Se o seu tema WordPress não tiver as fontes que você deseja usar, não entre em pânico! Você tem muitas opções para adicionar suas próprias fontes personalizadas do WordPress.

A maneira mais fácil de começar é com as fontes gratuitas hospedadas no Google Fonts ou as opções premium hospedadas no Adobe Fonts.

No entanto, você não está de forma alguma limitado a esses serviços e, usando CSS3 @ font-face, pode carregar literalmente qualquer arquivo de fonte para o WordPress e começar a usá-lo em seu tema.

Agora vá lá e crie seu próprio par de fontes!