Como adicionar fontes personalizadas ao WordPress?

Aprender a personalizar a tipografia do seu site é um aspecto bastante básico da criação e execução de um site. Ele pode mudar toda a sensação do seu site e fazer uma grande diferença na forma como os visitantes interagem com seus clientes.

Portanto, é necessário saber como adicionar fontes personalizadas ao WordPress. Escolher a fonte certa cria uma aparência distinta para o seu site, permite que você construa sua marca visual e aumenta a legibilidade e o envolvimento do visitante.

Existem milhares de fontes disponíveis online que você pode usar, muitas delas gratuitas. Este artigo falará sobre como adicionar fontes de dois dos bancos de dados de fontes da Web mais populares ao seu site - Google Fonts e Adobe Fonts, também conhecidos como Typekit Fonts. Essas bibliotecas de fontes incluem milhares de fontes da Web que você pode baixar.

Existem inúmeras outras bibliotecas de fontes na internet ao lado dessas, e falaremos sobre elas também.

Aqui estão as maneiras de adicionar essas fontes personalizadas ao seu site:

Como adicionar fontes personalizadas ao WordPress

1. Adicione o Google Fonts usando o plug-in

Se você planeja usar o Google Fonts para estilizar o conteúdo do seu site WordPress, existe uma ferramenta útil que conecta diretamente seu WordPress Customizer ao banco de dados do Google Fonts. O Easy Google Fonts é gratuito e permite que você use o Google Fonts sem precisar trabalhar com nenhum código.

1. Para este método, instale primeiro o plug-in Easy Google Fonts. Assim que o plugin estiver configurado, você encontrará uma nova opção chamada 'Tipografia' no seu WordPress Customizer (Aparência > Personalizar).

2. Ao acessar a opção Tipografia, você encontrará diferentes seções de conteúdo padrão ou controles de fonte que podem ser personalizados. Você pode encontrar as configurações de fonte para esse grupo específico clicando em 'Editar fonte'.

As configurações de fonte são bastante extensas e permitem que você personalize praticamente todos os aspectos do seu texto para criar o estilo de fonte desejado, como tamanho da fonte e muito mais. Você pode alterar a fonte para essa categoria de texto específica na opção Família de fontes na guia Estilos.

Na guia Aparência, você pode encontrar outras opções comuns, como Cor da fonte, Tamanho da fonte e Altura da linha.

Existem alguns controles visuais detalhados na guia Posicionamento, como Margem, Preenchimento e Borda.

3. Agora, seu site também pode exigir atenção especial a certas categorias de texto que podem não ser abordadas pelos controles de fonte padrão fornecidos por este plug-in. Talvez você queira apenas as mesmas configurações de tipografia para todos os seus títulos e queira uma única categoria para controlar todos eles. Você pode criar controles de fonte personalizados acessando Configurações > Google Fonts.

4. Vá para a guia Gerenciar controles de fonte e clique em 'Criar um controle de fonte'.

5. Você será solicitado a fornecer Seletores CSS para definir essa categoria específica. Em seguida, clique em 'Safe Font Control' para criar o novo controle de categoria/fonte.

6. Os controles de fonte personalizados podem ser encontrados em um local diferente do padrão. Volte para o WordPress Customizer e clique na opção Tipografia. Você descobrirá que existem duas categorias — Tipografia Padrão e Tipografia de Tema. Os controles de fonte personalizados serão encontrados na opção Tipografia do tema.

2. Adicione o Google Fonts usando código

1. Se você deseja adicionar seu Google Fonts ao WordPress sem um plug-in, pode adicionar código aos seus arquivos de tema. Você pode querer criar um tema filho para isso para poder reverter as alterações se não gostar delas.

2. Acesse o site do Google Fonts e encontre a fonte que você gosta. Você encontrará os diferentes estilos de cada fonte na página da fonte. Clique no botão 'Selecionar este estilo' para o estilo desejado. A fonte selecionada será salva para uso em uma seção especial. No canto superior direito da página, há um botão para visualizar as fontes selecionadas. Ele abre uma barra lateral com duas guias. Clique na guia 'Incorporar'.

3. Copie este link de incorporação e cole-o em seu arquivo header.php, logo antes da tag <body>.

4. Se você não quer lidar com as dificuldades de trabalhar com arquivos de tema, então existe um plugin útil chamado Insert Headers and Footers que adiciona código facilmente aos seus arquivos de tema. Você pode usar este plugin através de sua própria seção na barra de configurações intitulada 'Inserir Cabeçalhos e Rodapés'. Basta colar o código na caixa 'Scripts in Header'.

3. Adicione fontes Adobe TypeKit ao WordPress

A Adobe possui outra impressionante biblioteca de fontes personalizadas com uma versão gratuita e uma paga. Antes de começar a usar suas fontes, você precisa de uma conta no site do Adobe Fonts. Você pode começar a navegar pelas fontes disponíveis na página Procurar fontes .

1. Depois de fazer login no site, você pode usar as fontes que desejar clicando no botão </>.

2. Para obter o link de incorporação, você precisa criar um projeto da Web no Adobe Fonts e adicionar a fonte escolhida ao projeto.

3. Como no processo com o Google Fonts, você deve colar este link de incorporação no arquivo header.php do seu tema antes da tag <body>.

4. Você pode evitar trabalhar diretamente com arquivos de tema usando o plugin Insert Headers and Footers. Basta ir para a opção Inserir cabeçalhos e rodapés na barra de configurações e colar o código de incorporação na caixa 'Scripts no cabeçalho'. Isso importará as fontes TypeKit que você escolheu.

Algumas outras bibliotecas de fontes personalizadas

Enquanto o Google Fonts e o Adobe Fonts são alguns dos bancos de dados mais populares para fontes da web por aí. Mas existem muitas outras bibliotecas de fontes que você pode explorar para baixar as fontes certas para o seu site WordPress. Aqui estão alguns que você pode explorar:

1. Modelo Monstro
2. Esquilo de fonte
3. Fonte
4. 1001 Fontes Gratuitas
5. Font Freak
6. Fontes abstratas
7. MyFonts

Como adicionar outras fontes personalizadas usando o plug-in

Existe um plugin útil chamado Use Any Font que permite que você pule as dificuldades de adicionar fontes personalizadas manualmente. Ele fornece uma interface simples através da qual você pode adicionar novas fontes diretamente do seu painel e atribuir suas fontes personalizadas aos elementos desejados.

Como adicionar outras fontes personalizadas manualmente

Se você quiser adicionar as fontes desejadas manualmente, precisará fazer o upload do arquivo de fonte para o diretório do WordPress. Use um tema filho para isso, a fim de criar uma camada de segurança caso você não goste do novo visual ou algumas alterações indesejadas criem bugs em seu site. O tema filho permitirá que você reverta as alterações facilmente.

Baixe a fonte desejada de qualquer biblioteca de fontes como TemplateMonster. Em seguida, vá para wp-content/themes/your-theme/fonts e faça o upload para a pasta Fonts usando um cliente FTP. Se não houver uma pasta de fontes, crie uma.

Depois que o arquivo de fonte for carregado, você precisará importar a fonte usando sua folha de estilo. Adicione o seguinte código ao seu arquivo style.css :

@Tipo de letra {

font-family: Fonte personalizada;

src: url(http://yourwebsite.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf);

peso da fonte: normal;

}

Você precisa substituir a família de fontes pelo nome da fonte que deseja importar e o URL pelo URL do seu site.

Conclusão

Seguindo as etapas acima, você pode adicionar facilmente fontes personalizadas ao seu site WordPress com o mínimo de problemas. Existem milhares de fontes da Web que você pode usar apenas nos bancos de dados do Google Fonts e do Adobe Fonts. Com a escolha certa de fontes personalizadas, seu site pode ganhar um charme diferente, envolver melhor os visitantes e criar uma estética melhor relevante para o seu tópico.