Deseja adicionar fontes personalizadas no WordPress? Fontes personalizadas permitem que você use uma bela combinação de fontes diferentes 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 ajudá-lo a melhorar a legibilidade, criar uma imagem de marca e aumentar o tempo que os usuários gastam em seu site.
Neste artigo, mostraremos como adicionar fontes personalizadas no WordPress usando o método Google Fonts, TypeKit e CSS3 @ Font-Face.
Nota: Carregar muitas fontes pode tornar o site mais lento. Recomendamos escolher duas fontes e usá-las em todo o site. Também mostraremos como carregá-los adequadamente sem diminuir a velocidade do seu site.
Antes de vermos como adicionar fontes personalizadas no WordPress, vamos procurar fontes personalizadas que você pode usar.
Como encontrar fontes personalizadas para usar no WordPress
As fontes costumavam ser caras, mas não mais. Há muitos lugares para encontrar ótimas fontes gratuitas da Web, como Google Fonts, Typekit, FontSquirrel e fonts.com.
Se você não sabe como misturar e combinar fontes, tente o Emparelhamento de fontes. Ajuda os designers a emparelhar belas fontes do Google.
Ao escolher suas fontes, lembre-se de que o uso de muitas fontes personalizadas diminuirá a velocidade do seu site. É por isso que você deve selecionar duas fontes e usá-las em todo o design. Isso também trará consistência ao seu design.
Adicionando fontes personalizadas no WordPress a partir do Google Fonts
O Google Fonts é a maior biblioteca de fontes gratuita, e mais usada entre os desenvolvedores de sites. Existem várias maneiras de adicionar e usar as fontes do Google no WordPress.
Método 1: Adicionando fontes personalizadas usando o plug-in fácil do Google Fonts
Se você deseja adicionar e usar as Fontes do Google no seu site, esse 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 mais detalhes, consulte o nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, você pode ir para a página Aparência »Personalizador. Isso abrirá a interface do personalizador de temas ao vivo, onde você verá a nova seção Tipografia.
Ao clicar em Tipografia, você mostrará diferentes seções do seu site nas quais você pode aplicar as fontes do Google. Basta clicar em “Editar fonte” abaixo da seção que você deseja editar.
Na seção família de fontes, você pode escolher qualquer fonte do Google que deseja usar no seu site. Você também pode escolher o estilo, o tamanho, o preenchimento, a margem e muito mais.
Dependendo do seu tema, o número de seções aqui pode ser limitado e talvez você não possa alterar diretamente a seleção de fontes em muitas áreas diferentes do seu site.
Para corrigir isso, o plug-in também permite criar seus próprios controles e usá-los para alterar as fontes no seu site.
Primeiro, você precisa visitar a página Configurações »Fontes do Google e fornecer um nome para seu controle de fonte. Use algo que ajude a entender rapidamente onde você usará esse controle de fonte.
Em seguida, clique no botão “Criar controle de fonte” e você será solicitado a inserir seletores de CSS.
Você pode adicionar elementos HTML que deseja segmentar (por exemplo, h1, h2, p, blockquote) ou usar classes CSS.
Você pode usar a ferramenta Inspecionar no seu navegador para descobrir quais classes CSS são usadas pela área específica que você deseja alterar.
Agora clique no botão “Salvar controle da fonte” para armazenar suas configurações. Você pode criar quantos controladores de fonte forem necessários para diferentes seções do seu site.
Para usar esses controladores de fonte, você precisa ir para Aparência »Personalizador e clicar na guia Tipografia.
Em Tipografia, você também verá a opção “Tipografia de tema”. Clicar nele exibirá os controles de fonte personalizados que você criou anteriormente. Agora você pode apenas clicar no botão editar 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. Se você nunca fez isso antes, consulte nosso guia sobre como copiar e colar código no 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.
Na página da fonte, você verá os estilos disponíveis para essa fonte. Selecione os estilos que você deseja usar no seu projeto e clique no botão da barra lateral na parte superior.
Em seguida, você precisará alternar para a guia “Incorporar” na barra lateral 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 estiver familiarizado com a edição de código no WordPress, poderá usar um plug-in para adicionar esse código.
Basta instalar e ativar o plug-in Inserir cabeçalhos e rodapés. Para mais detalhes, consulte o nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, vá para a página Configurações »Inserir cabeçalhos e rodapés e cole o código de incorporação na caixa” Scripts no cabeçalho “.
Não se esqueça de clicar no botão Salvar para armazenar suas alterações. O plug-in agora 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 do seu tema assim:
.h1 site-title {
família de fontes: ‘Open Sans’, Arial, sans-serif;
}
Para instruções mais detalhadas, consulte o nosso guia sobre como adicionar fontes do Google em temas do WordPress.
Adding Custom Fonts in WordPress Using Typekit
O Typekit da Adobe Fonts é outro recurso gratuito e premium para fontes impressionantes 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.
Simplesmente inscreva-se em uma conta do Adobe Fonts e visite a seção de fontes de navegação. A partir daqui, você precisa clicar no botão </> para selecionar uma fonte e criar um projeto.
Em seguida, você verá o código de incorporação com o ID do seu projeto. Também mostrará como usar a fonte no CSS do seu tema.
Você precisa copiar e colar esse código na 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 tag <body>.
No entanto, se você não estiver familiarizado com a edição de código no WordPress, poderá usar um plug-in para adicionar esse código.
Basta instalar e ativar o plug-in Inserir cabeçalhos e rodapés.
Após a ativação, vá para a página Configurações »Inserir cabeçalhos e rodapés e cole o código de incorporação na caixa” Scripts no cabeçalho “.
Isso é tudo, agora você pode usar a fonte Typekit selecionada na folha de estilo do tema WordPress assim:
h1 .site-title {
família de fontes: gilbert, sans-serif;
}
Para obter instruções mais detalhadas, confira nosso tutorial sobre como adicionar tipografia incrível no WordPress usando o Typekit.
Adicionando fontes personalizadas no WordPress usando CSS3 @ font-face
A maneira mais direta de adicionar fontes personalizadas no WordPress é adicionando as fontes usando o método CSS3 @ font-face. Esse método permite que você use qualquer fonte que desejar no seu site.
A primeira coisa que você precisa fazer é baixar a fonte que você gosta em um formato da web. Se você não tiver o formato da Web para sua fonte, poderá convertê-lo usando o gerador FontSquirrel Webfont.
Depois de ter os arquivos da webfont, você precisará enviá-lo no seu servidor de hospedagem WordPress.
O melhor lugar para fazer o upload das fontes é dentro de uma nova pasta “fontes” no diretório do tema ou tema filho.
Você pode usar o FTP ou o Gerenciador de arquivos do seu cPanel para carregar a fonte.
Depois de fazer o upload da fonte, você precisará carregá-la na folha de estilo do seu tema usando a regra CSS3 @ font-face da seguinte maneira:
@Tipo de letra {
família de fontes: Arvo;
src: url (http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
peso da fonte: normal;
}
Não se esqueça de substituir a família da fonte e o URL pelos seus.
Depois disso, você pode usar essa fonte em qualquer lugar da folha de estilo do seu tema assim:
.h1 site-title {
família de fontes: “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 Typekit, é melhor veiculá-la diretamente do servidor para obter o desempenho ideal.
Esperamos que este artigo tenha ajudado a adicionar fontes personalizadas no WordPress.
Se você gostou deste artigo, assine os tutoriais em vídeo do canal do YouTube para WordPress. Você também pode encontrar-nos no Twitter e no Facebook.
