3 maneiras diferentes de adicionar fontes personalizadas ao tema do seu site WordPress

Existem muitas maneiras interessantes e personalizáveis ​​de tornar seu site WordPress mais exclusivo e visualmente atraente. Uma das maneiras é adicionar fontes personalizadas ao seu site WordPress. Dê uma olhada em alguns dos sites de seus concorrentes. Eles podem imitar o mesmo tom e estilo que você também espera criar com seu próprio site WordPress. Preste atenção ao uso de fontes. Muitos sites de sucesso tendem a usar um punhado de fontes cuidadosamente selecionadas que são usadas consistentemente em todo o site.

Existem tantas fontes personalizadas disponíveis online gratuitamente que você pode adicionar facilmente ao seu próprio site. Depois de encontrar as fontes certas, você precisará saber como aplicá-las ao seu site. Há uma variedade de métodos que você pode tentar para conseguir isso.

Primeiras coisas primeiro, encontrar a fonte certa; existem inúmeros sites por aí oferecendo milhares de fontes gratuitas para você baixar. Experimente Google Fonts, TemplateMonster, MyFonts, FontSpring, Cufonfonts, Dafont, Font Squirrel, Edge Web Fonts, 1001 Free Fonts, Fonts.com.

Resumindo, existem duas maneiras principais de adicionar fontes personalizadas ao seu site WordPress: manualmente ou com plug-ins.

Adicione manualmente fontes personalizadas ao tema do seu site WordPress

Adicionar fontes personalizadas ao seu WordPress manualmente pode ser benéfico se você preferir não correr o risco de sobrecarregar seu site WordPress com muitos plugins. Isso pode ser feito editando a diretiva @font-face. Isso permite que você conecte várias fontes de qualquer formato ao seu site.

Isso envolve as seguintes etapas:

Passo 1

Primeiro, baixe as fontes personalizadas escolhidas de qualquer site que você achar mais útil. Assim que o arquivo for salvo em seu computador, extraia este arquivo .zip.

Passo 2

Depois disso, você pode fazer o upload desse arquivo de fonte em seu servidor de hospedagem WordPress no diretório “wp-content/themes/your-theme-folder/fonts”. Se você ainda não configurou uma pasta designada para suas fontes personalizadas, crie uma e salve-a lá.

etapa 3

Em seguida, vá para a área de administração do WordPress. Selecione Aparência e vá para Editor de temas. Neste ponto, você verá o arquivo style.css do tema em sua tela. Abaixo disso, você precisará adicionar esta seção de código:

 @font-face { font-family: Aguafina Script-Regular; src: url(http://test-site.com/wp-content/themes/your-theme-folder/fonts/AguafinaScript-Regular.ttf); font-weight: normal; }

Lembre-se de substituir o “URL” e “font-family” no código pelos valores apropriados para corresponder à fonte escolhida. Você também deve colar esta seção de código no início do arquivo CSS, mas após o comentário do tema.

Passo 4

Por fim, certifique-se de clicar no importante botão Atualizar arquivo. Isso garante que suas alterações sejam salvas corretamente antes de você sair da página.

Passo 5

Depois disso, você pode facilmente usar a fonte em qualquer outro lugar que desejar aplicá-la na folha de estilo do seu tema. Usando o seguinte código:

 .h1 site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

Agora que você editou este código de fonte, sempre que alguém acessar seu site, a fonte será carregada. Mas você ainda não o aplicou a nenhum elemento específico da página. Para fazer isso, você precisa fazer mais uma edição final no arquivo style.css correspondente que você acabou de acessar. Você precisará inserir um código como o seguinte no arquivo:

 .site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

Recomendado para você: Guia para iniciantes: como instalar um tema WordPress?

Nota rápida:

Lembre-se, como antes, de editar o valor da família de fontes para que seja apropriado para a fonte que você está usando.

Se, por exemplo, você estiver usando fontes personalizadas do Google Fonts, verá que existe uma guia chamada @import, que fornece o código relevante para simplesmente copiar e colar no arquivo style.css do seu tema. Isso pode tornar todo o processo muito mais simples se você não se sentir confortável em lidar com muita codificação.

No entanto, este não é mais um método altamente recomendado. Ele encontrou alguns problemas de desempenho, impedindo que os navegadores baixassem várias folhas de estilo ao mesmo tempo. Isso resulta em páginas de carregamento mais lentas. Portanto, tenha isso em mente ao escolher suas fontes e métodos para usá-las.

Por outro lado, a instalação manual de fontes personalizadas por meio de CSS permite que você conecte fontes de vários formatos, incluindo SVG, WOFF, TTF e OTF. Este método também permite que você trabalhe sem depender de serviços de terceiros. Seus arquivos de fonte estarão localizados em seu servidor. Esta é a maneira mais direta de adicionar fontes personalizadas ao WordPress.

Use plug-ins para adicionar fontes personalizadas ao tema do seu site WordPress

Muitas pessoas optam por usar plug-ins para incluir suas fontes personalizadas em seus sites WordPress, pois, em muitos aspectos, pode ser o método mais simples de fazer isso. Isso é especialmente verdadeiro se você não quiser lidar com a codificação CSS. O Google Fonts é uma escolha popular, principalmente porque pode ser facilmente usado em conjunto com o plug-in do WordPress. As duas melhores opções para você são Easy Google Fonts e Google Fonts Typography. Depois de ativar qualquer um desses plug-ins, você poderá acessar facilmente todo o catálogo de fontes do Google Fonts para adicionar às suas páginas sem ter que lidar com nenhum código complicado.

Usar o Google Fonts é a maneira mais simples de fazer isso e você pode visualizar suas alterações e fontes personalizadas em tempo real na tela.

Dependendo de quais arquivos de fonte você deseja usar e se pretende usar um único repositório ou não, considere o uso de um plug-in alternativo, como o plug-in Custom Fonts.

Passo 1

Depois de instalar o plug-in de sua escolha e ativá-lo, vá para Aparência e, em seguida, clique na página Personalizador, que abrirá a página de interface do personalizador de tema do WordPress ao vivo. É aqui que você verá a guia Tipografia, que mostrará cada seção do seu próprio site na qual você pode aplicar suas próprias fontes personalizadas.

Passo 2

Depois de abrir esta página, você poderá clicar no botão Editar fonte na seção da página que deseja começar a editar. Em seguida, você pode trabalhar nas várias subseções, selecionando o estilo da fonte, tamanho, margem etc. – essas seções variam dependendo do tema que você está usando.

Seu tema também pode significar que você não poderá editar diretamente sua seleção de fonte para várias seções do seu site. Existe, no entanto, uma solução simples para esse problema: basta ir para Configurações e, em seguida, Fontes do Google, onde você pode criar seus próprios controles de fonte. Para fazer isso, basta inserir um nome de controle na caixa e selecionar os seletores de CSS. Isso permite que você adicione quaisquer elementos HTML que gostaria de direcionar para esta fonte. Depois de inserir essas informações, certifique-se de salvar suas alterações clicando no botão Salvar controle de fonte para que suas configurações sejam totalmente atualizadas. Você pode continuar a criar quantos controles de fonte personalizados forem necessários para cada seção diferente do seu site WordPress.

etapa 3

Para usar esses novos controladores de fonte depois de criá-los, volte para a seção Aparência, clique em Personalizador e, em seguida, clique na guia Tipografia. Em seguida, você verá a opção Tipografia do tema - ao clicar nela, você poderá acessar seus controles de fonte personalizados simplesmente selecionando o botão Editar para poder escolher as fontes que deseja e a aparência que deseja para este determinado ao controle. Mais uma vez, não se esqueça de salvar suas alterações, clicando no botão Publicar ou Salvar para atualizar seu site.

Nota rápida:

Alguns outros ótimos plug-ins de fonte personalizados do WordPress que recomendamos são Custom Font Uploader e Use Any Font – mas existem inúmeros outros para escolher, então explore suas opções antes de decidir qual você deseja usar.

Você também pode gostar: 20 temas WordPress de micro nicho mais vendidos.

Finalmente, tente usar temas

Além desses dois métodos principais para adicionar fonte e tipografia personalizadas ao seu site WordPress, você também pode usar os temas que pode escolher. Existem vários temas disponíveis, muitos dos quais vêm com opções integradas que permitem personalizar as fontes instaladas. O processo para fazer isso varia de acordo com o tema que você está usando. Portanto, certifique-se de procurar o guia apropriado para corresponder ao seu tema. Os temas WordPress premium de alta qualidade também oferecerão documentos disponíveis para acesso on-line, que fornecem diretrizes para adicionar fontes personalizadas a esse tema específico.

Os elementos visuais e de design são indiscutivelmente um dos fatores mais importantes na criação de um site eficaz que chamará a atenção de todas as pessoas que o visitam. Um dos maiores recursos dentro dessa esfera é o uso de fontes. Seja qual for a maneira que você escolher para adicionar fontes personalizadas ao seu site WordPress, você deve encontrar e usar as fontes mais adequadas para o estilo, público, conteúdo, tema e tom de todo o seu site e marca.

 Este artigo foi escrito por Beatrice Beard. Beatrice é redatora profissional da Academic Brits, especializada em uma gama impressionante de tópicos e áreas temáticas. Beatrice está sempre aberta para compartilhar sua experiência pessoal e dar conselhos especializados para escritores iniciantes, descobrindo todos os muitos desafios e peculiaridades da criação de conteúdo de alta qualidade que realmente vende.