Como adicionar fontes personalizadas ao WordPress?

Aprender como personalizar a tipografia do seu site é um aspecto bastante básico da construção e administração de um site. Você pode mudar a sensação geral do seu site e fazer uma grande diferença na maneira como os visitantes interagem com os clientes.

Então, você precisa saber como adicionar fontes personalizadas ao WordPress. A escolha da fonte correta cria uma aparência distinta para o seu site, permite que você crie 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: Fontes do Google Y Fontes Adobe, também conhecido 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. Adicionar 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 o seu WordPress Customizer ao banco de dados do Google Fonts. Fontes fáceis do Google é gratuito e permite que você use Google Fonts sem ter que trabalhar com nenhum código.

  1. Para este método, instale o Fontes fáceis do Google plugin primeiro. Assim que o plugin for configurado, você encontrará uma nova opção chamada ‘Tipografia’ em seu WordPress Customizer (Appearance> Customize).
Tipografia

2. Depois de ir para 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’.

Editar fonte

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

Leia Também:  Baixe 10 plug-ins grátis para acelerar seu site WordPress

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 Positioning, como Margin, Fill e Border.

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

Fontes do Google

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

Crie um novo controle de fonte

5. Você será solicitado a fornecer seletores CSS para definir esta categoria específica. Em seguida, clique em ‘Safe Font Control’ para criar a nova categoria / controle de fonte.

Seletores CSS

6. Os controles de fontes personalizadas podem estar em um local diferente do padrão. Volte para o WordPress Customizer e clique na opção Tipografia. Você verá que existem duas categorias: Tipografia Padrão e Tipografia Temática. Os controles de fonte personalizados são encontrados na opção Tipografia do tema.

Tipografia temática

2. Adicione fontes do Google via código

  1. Se você deseja adicionar suas fontes do Google ao WordPress sem um plugin, você pode adicionar código aos seus arquivos de tema. Você pode querer criar um tema filho para isso, de forma que possa reverter suas alterações, caso não goste delas.
Clicar em Selecionar este estilo

2. Vá para Site do Google Fonts e encontre a fonte que você mais gosta. Você encontrará os diferentes estilos para cada fonte na página de fontes. Clique no botão ‘Selecionar este estilo’ para o estilo desejado. A fonte que você selecionou 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. Abra uma barra lateral com duas guias. Clique na guia ‘Inserir’.

Leia Também:  Como criar um link curto no WordPress (a maneira mais fácil)
Família selecionada

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

4. Se você não quiser lidar com o incômodo de trabalhar com arquivos de tema, existe um plugin útil chamado Insira cabeçalhos e rodapés 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 no cabeçalho’.

Insira cabeçalhos e rodapés

3. Adicione fontes Adobe TypeKit ao WordPress

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

  1. Depois de fazer login no site, você pode usar as fontes que deseja clicando no botão .
Fontes Adobe

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

Escolha a fonte para o projeto
Código embutido

3. Como no processo com o Google Fonts, você deve colar este link para inserir no arquivo header.php do seu tema antes da tag .

4. Você pode evitar trabalhar diretamente com arquivos de tema usando Insira cabeçalhos e rodapés plugue. Basta ir até a opção Inserir cabeçalhos e rodapés na barra de configurações e colar o código incorporado na caixa ‘Scripts no cabeçalho’. Isso importará as fontes TypeKit que você escolheu.

Insira cabeçalhos e rodapés

Algumas outras bibliotecas de fontes personalizadas

Enquanto Google Fonts e Adobe Fonts são alguns dos bancos de dados mais populares para fontes da web que existem. 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. Monstro modelo
  2. Esquilo
  3. Fontspring
  4. 1001 fontes grátis
  5. Doido por fontes
  6. Fontes abstratas
  7. MyFonts
Leia Também:  Baixe 10 plug-ins grátis para acelerar seu site WordPress

Como adicionar outras fontes personalizadas usando o plugin

Existe um plugin útil chamado Use qualquer fonte o que permite evitar o incômodo de adicionar fontes personalizadas manualmente. Ele fornece uma interface simples por meio da qual você pode adicionar novas fontes diretamente de seu painel e atribuir suas fontes personalizadas aos elementos desejados.

Como adicionar outras fontes personalizadas manualmente

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

Baixe a fonte que deseja de qualquer biblioteca de fontes, como TemplateMonster. Então vá para wp-content / themes / your-theme / fonts e carregue-o para a pasta de fontes usando um cliente FTP. Se não houver 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 style.css arquivo:

Perfil @Front {

família de fontes: 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 da fonte 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 aborrecimento. Existem milhares de fontes da web que você pode usar apenas nos bancos de dados Google Fonts e Adobe Fonts. Com a escolha certa de fontes personalizadas, seu site pode ganhar um charme diferente, atrair melhor os visitantes e criar uma estética mais relevante para o seu tema.

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: