Como adicionar fontes personalizadas a um tema WordPress

As fontes desempenham um papel importante no design, legibilidade e, às vezes, até na funcionalidade do seu site. Escolha o errado e você pode arruinar o que de outra forma é um ótimo site. Da mesma forma, tanto o estilo da fonte quanto o tamanho podem ditar o quão fácil (ou não!) seu site é usar. Mas o que você faz se sua fonte ideal não estiver disponível no seu tema WordPress? Neste artigo, veremos várias maneiras de usar a fonte personalizada de sua escolha.

Vamos indo!

Por que usar fontes personalizadas

Muitos temas agora vêm com uma seleção de fontes para você escolher que são 'assadas'. Em muitos casos, eles são adequados para o site que você está projetando. Mas, se você não conseguir selecionar a fonte certa com as fontes que já estão em oferta, é hora de procurar fontes alternativas e isso significa que você precisará adicionar suas fontes personalizadas ao seu site.

O uso de fontes personalizadas permite que você aproveite a bela combinação de diferentes fontes em seu site para melhorar a tipografia e a experiência do usuário. A pesquisa mostrou que há benefícios significativos de usar a tipografia certa. Isso inclui não apenas uma melhoria na experiência geral do usuário, mas também o quão bem as informações em um site são processadas pelo cérebro. Quanto mais fácil for, mais fácil será comunicar sua oferta/serviços de negócios aos seus clientes.

Embora o uso de fontes personalizadas possa definitivamente melhorar a usabilidade do seu site, é importante não enlouquecer as fontes! Uma seleção de duas fontes que foram cuidadosamente emparelhadas deve ser ampla. Mais, e você corre o risco de deixar seu site mais lento.

Vamos dar uma olhada nas opções disponíveis para adicionar fontes personalizadas ao nosso site WordPress.

Adicionar Google Fonts com o plug-in Google Fonts

A maneira mais fácil e popular de adicionar fontes personalizadas ao seu site WordPress deve ser usando o Easy Google Fonts Plugin.

Depois de instalar e ativar este plugin, abra seu personalizador de tema no menu Aparência > Personalizar. Você notará na barra lateral esquerda que um novo menu suspenso de acordeão chamado Tipografia foi adicionado.

Clique para abrir e, em seguida, você pode usar o botão 'Editar fonte' para alterar rapidamente as fontes do seu site, bem como seu respectivo peso, se são maiúsculas, etc. e muito mais. Você também pode usar propriedades CSS para alterar ainda mais o estilo e o posicionamento das fontes escolhidas.

Além disso, você pode até adicionar seus próprios controles de fonte. Para fazer isso, vá para a página de configurações do plug-in em Configurações> Google Fonts.

Crie um novo controle de fonte e defina os seletores CSS. Por exemplo, definimos as classes .entry-title que correspondem aos títulos dos posts do nosso tema. Então, ao visitar o personalizador novamente, uma nova caixa estará disponível com o nome especificado para você aplicar a personalização da fonte aos títulos dos posts da mesma forma que descrevemos acima. Fácil!

Adicionar fontes do Google manualmente

Se você preferir não usar um plug-in, mas ainda quiser aproveitar o uso do Google Fonts em seu site WordPress, não há problema. Estes podem ser adicionados manualmente com relativa facilidade. Vamos dar uma olhada como. É claro que também existe uma maneira manual de adicionar o Google Fonts ao seu site.

Passo um:

Primeiro, você precisa obter o link da fonte no site de fontes do Google.

Digamos que você queira usar a família de fontes Roboto. Ao clicar nessa fonte, você será transferido para sua página, onde poderá visualizar qualquer texto para ter certeza de que a fonte combina com você. No lado direito, você verá uma caixa 'Usar na web' que inclui o link necessário para adicionar isso ao seu site.

Para enfileirar corretamente o Google Fonts no WordPress, abra o arquivo functions.php do seu tema com seu editor favorito e insira o seguinte código no final:

 function my_google_fonts() { wp_enqueue_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap', false ); } add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

Copie o URL fornecido no texto do Link do Google (começa com https://) e substitua-o no código acima (no nosso exemplo, atualmente é https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap )

Em seguida, no arquivo style.css do seu tema, use a fonte da mesma forma que faria com qualquer outra fonte, seguindo as “regras CSS para especificar famílias” fornecidas pelo Google.

 h1, h2, h3 { font-family: 'Roboto', sans-serif; }

Agora, no front-end do seu site, você deve ver a fonte Roboto aplicada às áreas onde foi especificada em seu arquivo CSS.

Adicionar fontes da Adobe

Uma ótima alternativa ao Google Fonts são as fontes do Adobe Fonts. O plug-in Custom Adobe Fonts ajuda você a incorporar essas fontes facilmente em seu site WordPress e atualmente funciona com o Astra Theme, Beaver Builder Theme, Beaver Builder Plugin e Elementor Page Builder.

Para começar, instale o plug-in e, em seguida, vá para a extensa biblioteca de fontes da Adobe para encontrar uma fonte adequada para você (você precisará se registrar para fazer login).

Existem várias maneiras de filtrar fontes e o sistema é bastante intuitivo de usar. Depois de encontrar uma fonte que você gosta, clique nela e olhe para perto do canto superior direito da página, onde você verá que diz 'Adicionar ao projeto da web'. Uma caixa como a abaixo será aberta. Dê um nome ao seu projeto da web e selecione as variantes de fonte que deseja incluir nele.

Depois de dar um nome e pressionar o botão 'Criar', você será levado para a próxima tela onde um código HTML incorporado e as regras CSS são fornecidas. Agora você tem duas opções. Você pode a) continuar usando o plug-in Custom Adobe Fonts ou b) incorporar essas fontes manualmente.

Usando o plug-in de fontes personalizadas da Adobe

Essa é a maneira mais fácil de inserir suas fontes Adobe em seu site. Depois de criar seu projeto, clique em 'Projetos da Web' e encontre seu projeto na lista. Você verá na parte superior que há um código 'Project ID' (como mostrado abaixo). Agora, vá para as configurações do plug-in do Adobe Font e clique em 'Custom Typekit Fonts' no menu. Insira este ID do projeto nesta caixa e salve.

Agora você verá essa fonte listada no WordPress Customizer, Elementor ou outro construtor de páginas compatível que você usa. Selecione e você está pronto para ir.

Incorporando fontes personalizadas manualmente

A incorporação manual das fontes da Adobe é feita exatamente da mesma maneira que descrevemos para incorporar as fontes do Google. Você verá um link de incorporação de folha de estilo fornecido pela Adobe (mostrado abaixo) na visão geral do projeto da Web. Para visualizar as classes CSS, clique no texto 'Editar projeto' e elas são fornecidas ao lado de cada estilo de fonte.

Como encontrar fontes personalizadas e emparelhá-las

Você também pode encontrar e baixar a fonte ideal para o seu site e carregá-la nas pastas do seu site, pois há muitos recursos disponíveis fornecendo fontes gratuitas ou premium em uma grande variedade.

Você também pode obter ajuda da ferramenta online Font Pair, que é ótima para visualizar combinações de fontes para que você possa misturar e combinar fontes como achar melhor. Da forma como apresenta os pares de fontes, também é fácil descobrir outras sugestões de emparelhamento navegando.

Em nosso blog, você também pode encontrar dois ótimos artigos sobre emparelhamento de fontes. Existe o Guia de Emparelhamento de Fontes para Web Designers + 30 Exemplos Incríveis! caso você queira aprender mais sobre o emparelhamento de fontes em termos de design com ótima consultoria sobre o que você deve enfatizar e como obter a melhor legibilidade e sensação. Mais detalhes sobre as ferramentas de emparelhamento de fontes podem ser encontrados em nosso artigo 10 principais ferramentas de emparelhamento de fontes para Web Designers.

Carregar fontes personalizadas de pastas

Embora o Google Fonts e o Adobe Fonts ofereçam uma seleção incrível para você escolher, além de uma maneira fácil de utilizá-los em seu site, não é a única opção disponível para você em sua busca pela fonte perfeita.

Existem vários sites excelentes que vendem fontes personalizadas que foram cuidadosamente criadas por designers. O Font Squirrel, por exemplo, oferece uma grande biblioteca de fontes e, o mais importante, permite o uso comercial e um formato fácil de implementar para essas fontes. Há uma mistura de fontes gratuitas e 'premium' no site (que precisam ser pagas).

Uma ótima fonte que você pode considerar da Font Squirrel é a Fira Sans. Vamos usar isso como exemplo para descobrir como instalá-lo em nosso site WordPress para uso.

Primeiro, clique na guia 'Webfont Kit'. Marque a caixa 'WOFF e clique em 'Baixar kit @Font-Face'.

Você obterá um arquivo zip que agora precisa ser extraído. Nesta pasta, você encontrará o arquivo de fonte junto com um arquivo stylesheet.css que contém o código necessário para sua própria folha de estilo CSS.

Para o OpenSans-ExtraBold-webfont, por exemplo, temos que usar o seguinte CSS:

 @font-face { font-family: 'open_sansextrabold'; src: url('OpenSans-ExtraBold-webfont.eot'); src: url('OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-ExtraBold-webfont.woff2') format('woff2'), url('OpenSans-ExtraBold-webfont.woff') format('woff'), url('OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); font-weight: normal; font-style: normal; }

Sua melhor aposta é colocar todos os arquivos de fonte de todos os formatos dentro de um diretório apropriado de sua escolha na pasta do tema. Em nosso exemplo, está na pasta /wp-content/themes/twentytwenty/assets/fonts/open-sans/ .

Dentro da mesma pasta crie um arquivo open-sans.css e coloque dentro de todo o código CSS de cada arquivo stylesheet.css para que seu conteúdo fique assim:

 @font-face { font-family: 'open_sansbold'; src: url('OpenSans-Bold-webfont.eot'); src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Bold-webfont.woff') format('woff'), url('OpenSans-Bold-webfont.ttf') format('truetype'), url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansbold_italic'; src: url('OpenSans-BoldItalic-webfont.eot'); src: url('OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-BoldItalic-webfont.woff') format('woff'), url('OpenSans-BoldItalic-webfont.ttf') format('truetype'), url('OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansextrabold'; src: url('OpenSans-ExtraBold-webfont.eot'); src: url('OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-ExtraBold-webfont.woff') format('woff'), url('OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); font-weight: normal; font-style: normal; }

Isso também ajuda os vários navegadores a selecionar a fonte que ele suporta. Se você precisar enfileirar o arquivo CSS das fontes do jeito do WordPress, você deve fazê-lo em functions.php assim:

 function my_custom_fonts() { wp_enqueue_style( 'my-custom-fonts', get_template_directory_uri() . '/assets/fonts/open-sans/open-sans.css', false ); } add_action( 'wp_enqueue_scripts', 'my_custom_fonts' );

Não se esqueça de substituir a URL pelo caminho para o arquivo open-sans.css.

Conclusão

Escolher a fonte certa ao criar seu site tem um impacto significativo na aparência e no funcionamento do seu site. Com tantas fontes incríveis para escolher, não sinta que precisa ficar apenas com as fontes fornecidas pelo seu tema. Espero que este artigo mostre como você pode usar praticamente qualquer fonte adequada para o seu site WordPress!