Como adicionar fontes personalizadas ao WordPress de maneira fácil

Publicados: 2015-05-22

Adicionar mais fontes ao seu computador é bastante simples. Basta baixar os arquivos para o diretório de fontes e começar a usá-los em seu software e aplicativos de sua escolha.

No entanto, se você quiser usar fontes personalizadas em seu site, especialmente aquelas fontes que seus visitantes podem não ter instalado em seus dispositivos, fica um pouco mais complicado.

Felizmente, como usuário do WordPress, existem ótimas ferramentas gratuitas que você pode usar para adicionar fontes individuais ou uma biblioteca inteira delas ao seu site. Depois de disponibilizar as fontes para o seu tema, você pode começar a aplicá-las aos vários estilos em uso em seu site.

Neste artigo, mostraremos onde você pode encontrar fontes gratuitas e premium de alta qualidade, como adicioná-las ao seu site WordPress, além de algumas ferramentas para ajudá-lo a escolher as configurações corretas para cada tipo de letra em seu site.

Fontes personalizadas para WordPress

Onde encontrar fontes para seu site

Antes de chegarmos às instruções sobre como você pode adicionar fontes personalizadas ao seu site WordPress, vamos dar uma olhada em alguns dos lugares onde você pode encontrar novos tipos de letra para modificar a aparência do texto em seu site.

Fontes do Google

Existem alguns ótimos recursos on-line gratuitos disponíveis, onde você pode encontrar fontes de código aberto que podem ser usadas livremente em todo o site. Alguns recursos que você pode gostar de explorar incluem:

  • Google Fonts: navegue em mais de 600 fontes de código aberto que foram otimizadas para a web. Usar essas fontes em seu site WordPress é muito fácil, como abordaremos em breve.
  • Font Squirrel: outro grande repositório de fontes gratuitas.
  • Edge Web Fonts: uma coleção de fontes da Web gratuitas fornecidas pelo Adobe Typekit.
  • Typekit: uma coleção profissional de mais de 4.000 fontes gratuitas e premium da Adobe, para uso na web e impressa.

Como você pode ver, existem muitas fontes online legítimas de fontes gratuitas e premium que você pode usar para personalizar a aparência do seu site WordPress.

Ferramentas de tipografia para web designers

Escolher o conjunto certo de fontes para o seu site pode ser difícil. Há mais no processo do que apenas escolher uma ou duas fontes que você gosta e adicioná-las ao seu site.

Não apenas você deve levar em consideração a aparência da fonte, mas também o tamanho que você escolherá, a largura da área de conteúdo do seu site e qual é a altura ideal da linha para cada tipo de letra.

Felizmente, existem algumas ferramentas online gratuitas que você pode usar para ajudá-lo a aplicar corretamente as fontes escolhidas. Isso garante que seu conteúdo tenha a melhor aparência .

Um recurso on-line que você definitivamente deve dar uma olhada rápida ao personalizar as fontes em seu site é a Calculadora de tipografia de proporção áurea. Esta ferramenta de tipografia, do cara por trás do Thesis Framework, permite que você insira um tamanho de fonte, seguido pela largura da sua área de conteúdo. A ferramenta calculará as configurações tipográficas perfeitas para a configuração específica do seu site.

O Type Scale é outra ferramenta online que facilita estabelecer o tamanho que os diferentes estilos de texto em seu site devem ter em relação uns aos outros. Depois de inserir o tamanho da fonte base, como o tamanho do texto do parágrafo em seu site, você descobrirá para qual tamanho cada um dos diferentes títulos deve ser definido.

Escala de tipo

Existem várias escalas para escolher, incluindo a Proporção Áurea acima. Quando estiver satisfeito com as configurações, você poderá copiar rapidamente o CSS para uso em seu próprio site.

Plugins de fontes personalizadas do WordPress

Assim como existem muitos lugares para encontrar fontes online, também existem muitas maneiras de integrá-las ao seu site WordPress. No entanto, para ajudá-lo a começar o mais rápido possível , aqui estão alguns dos melhores plugins relacionados a fontes do WordPress:

Fontes fáceis do Google

Plug-in fácil de fontes do Google

Easy Google Fonts é um plugin gratuito que permite usar qualquer uma das mais de 600 fontes gratuitas do repositório do Google em seu site WordPress. O plugin funciona com a ferramenta WordPress Customizer. Isso permite que você visualize suas alterações antes de tomar uma decisão final sobre quais fontes usar em seu site.

Depois de instalar e ativar o plugin em seu site, você pode começar a alterar as fontes usadas pelo seu tema atual do WordPress. Para fazer isso, vá até a ferramenta WordPress Customizer e clique na seção Tipografia.

Personalizador fácil de fontes do Google

Pronto para uso, o plug-in permite alterar as configurações de tipografia para os principais estilos em uso pelo seu tema. Isso pode incluir o parágrafo e os títulos individuais. No entanto, por meio da página de configurações do Easy Google Fonts, você pode criar controles de fonte personalizados . Eles são adicionados à interface do Personalizador, oferecendo uma maneira fácil de alterar a fonte usada por elementos como listas, citações e muito mais.

Controles fáceis de fontes personalizadas do Google Fonts

Depois de adicionar um controle de fonte personalizado, você pode acessá-lo nas configurações de Tipografia de tema no Personalizador.

Tipografia fácil do tema do Google Fonts

Ao usar esse recurso do plug-in, você pode modificar as fontes usadas por qualquer um dos elementos ou estilos do seu tema WordPress. Os controles adicionados ao Personalizador também abrangem a espessura da fonte, a decoração do texto e as propriedades de transformação, bem como a cor da fonte, a cor do plano de fundo, o tamanho, a altura da linha e o espaçamento entre letras.

Cores fáceis de fontes do Google

Ao combinar os controles de fonte personalizados com as configurações detalhadas oferecidas, o plug-in Easy Google Fonts abre um mundo de possibilidades quando se trata de modificar a aparência do texto em seu site WordPress, tudo sem a necessidade de editar nenhum código diretamente.

Use qualquer fonte

Use qualquer plug-in de fonte

O plugin Easy Google Fonts acima é altamente recomendado. No entanto, ele tem uma desvantagem: você só pode usar os tipos de letra da coleção do Google Fonts. Se nenhuma dessas 686 fontes for atraente, ou se você quiser usar um tipo de letra personalizado , o plug-in Use Any Font, igualmente gratuito, é uma boa alternativa.

Depois de instalar e ativar o plugin, você pode fazer upload de uma ou mais fontes para o seu site, diretamente do seu computador. No entanto, antes de começar, você deve se inscrever para a chave de API gratuita (ou fazer uma doação), que conectará o plug-in à ferramenta de conversão de fontes.

Use qualquer upload de fonte

Depois de carregar pelo menos uma fonte, você pode atribuí-la aos elementos específicos do seu site. Isso inclui a lista de elementos padrão, bem como quaisquer elementos personalizados que você definir.

Use qualquer atribuição de fonte

O plugin também adiciona alguns controles de fonte ao editor de posts do WordPress . Isso facilita a alteração das fontes usadas em suas postagens e páginas, individualmente, e não globalmente.

Use qualquer editor de fontes

Depois de atribuir uma fonte, você pode visualizar as alterações em sua tipografia visitando o front-end do seu site. Embora os controles deste plug-in não se comparem aos oferecidos pelo plug-in Easy Google Fonts, se você quiser apenas alterar as fontes usadas pelos elementos específicos do seu tema para uma fonte personalizada de sua escolha, Use Any Font bem o trabalho.

Fontes Typekit para WordPress

Typekit para WordPress

Se você deseja usar as fontes gratuitas e premium do serviço Adobe Typekit em seu site WordPress, o plug-in Typekit Fonts for WordPress gratuito é para você.

Com este plug-in, você pode usar os seletores predefinidos ou adicionar suas próprias regras CSS personalizadas . Isso garante que qualquer parte do seu site que você deseja personalizar com uma fonte Typekit, você está livre para fazê-lo com este plugin.

Adicionando fontes personalizadas ao WordPress manualmente

Se, por qualquer motivo, a ideia de usar um dos plugins gratuitos acima não for atraente, você sempre pode alterar as fontes usadas no seu site WordPress manualmente. Se a fonte que você deseja usar pode ser encontrada no repositório do Google Fonts, adicioná-la ao seu site é muito fácil.

Adicionar fonte do Google

Tudo o que você precisa fazer é selecionar a fonte no site do Google e copiar o código relevante na seção principal e na folha de estilo CSS do seu site.

Adicionar CSS do Google Font

No entanto, se a fonte de sua escolha não estiver hospedada em um repositório como o Google Fonts, onde você pode simplesmente criar um link para ela, será necessário hospedar a fonte você mesmo. Isso altera um pouco o processo e adiciona algumas etapas extras, como fazer upload da fonte para o servidor.

Gerenciador de arquivos

Você pode carregar o arquivo de fonte usando o software FTP ou a ferramenta de gerenciamento de arquivos no painel de controle do seu host. É uma boa ideia fazer upload da fonte para um diretório de fontes dedicado , de preferência na pasta do tema filho para ajudar a manter as coisas organizadas.

FTP

Assim que o arquivo de fonte estiver no seu servidor, abra o arquivo de folha de estilo CSS do seu tema para edição. Isso pode ser feito no painel de administração do WordPress, na tela Aparência > Editor.

CSS customizado

Depois de adicionar o CSS acima à folha de estilo para carregar a fonte, você pode usá-lo em qualquer lugar nesse arquivo CSS para modificar a aparência do texto conforme abaixo:

Adicionar CSS do Google Font

Por motivos de desempenho, sempre que possível, você deve tentar vincular a um repositório de fontes externo, como o Google Fonts. No entanto, se você não conseguir encontrar a fonte que deseja usar on-line, talvez seja necessário sacrificar parte da velocidade da página hospedando o arquivo você mesmo.

Conclusão

Espero que agora você saiba onde encontrar fontes personalizadas e como começar a adicioná-las ao seu site WordPress. Ao usar um dos plugins gratuitos, como o Easy Google Fonts, você pode começar a alterar não apenas as fontes usadas em seu site, mas também a forma como essas fontes são apresentadas .

Graças à ferramenta WordPress Customizer, agora você pode facilmente fazer alterações na aparência do texto em seu site. Tudo isso acontece por meio de um conjunto de menus visuais, completos com uma visualização ao vivo.

Se o seu tema atual não lhe dá muito controle sobre quais fontes são usadas em seu site, usando um dos métodos acima, você agora tem uma maneira fácil de fazer essas alterações, sem editar nenhum CSS subjacente.

Quais são suas fontes favoritas? Quais configurações de tipografia em seu site você deseja alterar? Se você tiver alguma dúvida sobre fontes, tipografia ou WordPress em geral, compartilhe-as nos comentários abaixo.