Como usar Google Fonts no seu WordPress

A escolha de boas fontes para o conteúdo escrito de um site é uma tarefa embasada em mais do que a decisão por algo bonito e legível. Diferentes estilos trazem percepções específicas, dando destaque ou transmitindo uma ideia conceitual a quem acessa o site. Por isso, quem costuma gerenciar projetos no WordPress precisa saber como usar o Google Fonts.

A página, de simples acesso, navegação e escolha de fontes, permite que um usuário escolha diferentes tipos de letras, considerando algumas características, desde as diferentes categorias até os estilos gráficos das fontes.

O mais interessante é poder usar cada uma dessas opções livremente em sites WordPress, fazendo a instalação em um processo simples e rápido.

Neste post você confere os seguintes tópicos:

O que é o Google Fonts

O Google Fonts é um banco de fontes do Google em que o usuário pode escolher diferentes estilos de letras e numerais.

Nesse site, a busca é facilitada devido à separação nos níveis de categorias, idiomas e características gráficas das fontes.

Elas podem ser instaladas no WordPress, com livre uso para usuários dessa plataforma.

Como navegar pelo site?

O Google Fonts é um site fundamental para quem está em trabalho para criar um site ou blog no WordPress (por conta própria ou pelo Stage), já que ele oferece fontes gratuitas em um banco de dados amplo e diversificado.

Logo ao acessar a home dessa plataforma, é possível perceber que a ideia é oferecer algo fácil, já que o design do site é totalmente minimalista, focando em direcionar o usuário à busca da fonte.

De início, a home mostra a barra superior de configurações de busca e, ao longo da página, todas as fontes disponíveis no banco de dados aparecem, com exemplos de como ficam.

Para ver cada uma, basta rolar a página para baixo, caso esse seja o seu método de busca favorito.

A procura pela rolagem da página pode ser uma opção para quem não tem em mente o que espera da fonte. Ainda assim, é uma forma muito mais demorada de procura.

Uma opção mais otimizada e precisa é o uso da barra superior, já que ela ajuda a filtrar as características buscadas para a fonte ideal.

O uso dela é muito simples, já que ela nunca some da tela, mesmo que o usuário faça a rolagem para baixo e siga visualizando a oferta de fontes.

Ao acessar a home, o usuário consegue identificar seis opções principais na barra superior:

• barra de busca em que o nome da fonte pode ser inserido para encontrá-la rapidamente;
• opção de seleção de exemplos em que o usuário escolhe entre numeral, frase, alfabeto ou parágrafo. Assim, cada fonte que aparece na tela inicial, ou a que for escolhida, será apresentada dentro de cada uma dessas seleções que foram escolhidas previamente;
• opção para selecionar, em pixels, o tamanho da exibição das fontes na tela;
• ícone de balde de tinta, que permite selecionar o background da página, o que é ideal para testar a aplicação em diferentes cores de fundo, simulando o site em que a fonte será usada;
• opção para mudar a exibição da fonte para lista;
• botão de reset para voltar às predefinições iniciais dos filtros.

É importante destacar que a exibição na sua tela é uma escolha definida pelo Google na configuração padrão, que é a das fontes em alta no momento.

No entanto, em uma barra no canto direito do monitor, é possível alterar essa exibição para as opções Most Popular (“mais popular”), Newest (“novas”) ou Name (em ordem alfabética de acordo com o nome das fontes).

Por que usar o Google Fonts?

Há outras formas de conseguir boas fontes na web, mas o Google Fonts é uma alternativa que se destaca, graças a algumas boas vantagens. Entre as principais que merecem nosso destaque estão:

• sem custos: você tem uma seleção incrível de fontes de diversos estilos e totalmente gratuitas para escolher;
• acessível: como você viu neste post, é fácil acessar o site e realizar o processo de busca, download e instalação, principalmente usando o plugin;
• compatível: todas as fontes do Google Fonts são compatíveis com o WordPress.

Confira também estes conteúdos:
Como criar um site: o que você precisa saber para fazer o seu
O que é HTML e qual sua funcionalidade?
Wireframe: quais os tipos e as principais ferramentas de criação

Sem mistérios, escolher uma fonte, baixar e instalar é o passo a passo para começar a usá-la no seu site em WordPress.

Escolha uma fonte

A escolha é o passo mais simples. Como explicamos, você tem uma série de opções de filtros e configurações de exibição.

Basta optar pela que preferir na página e, então, decidir qual fonte você deseja para o seu projeto. Há opções para diferentes tipos de aplicações, ou seja, elas podem ser utilizadas para construir uma landing page ou para o desenvolvimento de conteúdos interativos.

Quando escolher o modelo ideal, basta clicar sobre o nome da fonte, que você será direcionado para uma nova página com um detalhamento sobre o estilo selecionado.

É possível modificar o texto de exemplo exibido na lista de fontes. Para isso, escreva uma frase qualquer no campo que contém a expressão “Type something”, localizado ao lado da barra de pesquisa de fontes.

Perceba todas as fontes mostrarão esse conteúdo. Também podemos exibir alguns valores pré-definidos, como o alfabeto, os números ou o próprio texto padrão definido pela ferramenta.

Esse recurso é interessante para verificar se as fontes exibem de maneira adequada diferentes caracteres, como acentos e pontuações. Isso porque há fontes que não oferecem esse recurso, como a Nanum Gothic, que não oferece os caracteres “ã” e “õ”. Isso pode ser prejudicial para a exibição do conteúdo e para a experiência da persona no site.

Uma alternativa para identificar as fontes que não acentuam bem é modificar o conteúdo de exibição por letras ou frases que contenham acentuação.

Procure pela fonte

Se você já souber o nome da fonte ou parte dele, pode realizar uma busca adicionando essa informação na barra de pesquisa, que a relação de fontes que tenham o trecho informado será listada nos resultados. Isso representa uma economia de tempo para quem já sabe qual opção procura.

Considere tamanhos e estilos

Atualmente, o Google Fonts oferece 1.324 famílias de fontes, e esse número aumenta constantemente, pois qualquer pessoa pode contribuir com a plataforma e disponibilizar novas fontes.

Além do grande número de fontes disponíveis, é importante lembrar que cada uma contém variações. Entre elas, o peso, que representa a espessura da fonte, e o estilo, que também pode variar bastante em cada alternativa. Alguns dos principais estilos são regular, bold e itálico.

Podemos encontrar no Google Fonts tanto famílias com apenas um ou dois estilos quanto fontes com cerca de 12, 14 e até 18 variações. Isso representa muito mais alternativas para os usuários, pois, na prática, há uma enorme possibilidade de escolha para a utilização em um site.

A quantidade de estilos de cada fonte aparece listada bem ao lado direito do nome da fonte. Dessa forma, fica mais fácil identificar as que têm mais opções. Vale ressaltar que, em algumas fontes, não há a exibição da quantidade de estilos. Em vez disso, elas são listadas como “Variable”, ou seja, são fontes variáveis.

As fontes variáveis surgiram em 2016, e oferecem uma forma mais moderna para configurar esse recurso. Na prática, elas podem ser personalizadas em diferentes aspectos, como o estilo, a largura e o peso. 

Na imagem acima, mostramos as possíveis variações para a fonte Open Sans. Perceba que podemos arrastar os controles localizados na parte esquerda da página e visualizar o resultado na caixa de exibição da fonte. Quando o resultado for o esperado, basta clicar no link “Select this style” para selecionar o estilo configurado.

Veja que o resultado será mostrado na barra lateral direita da página, com diferentes opções para o download da fonte ou para a cópia do código. Não se preocupe, que falaremos mais sobre como baixar e instalar as fontes nos próximos tópicos.

Use o filtro de pesquisa

O Google Fonts contém diversas configurações que podem ser utilizadas para fazer uma busca mais refinada por determinada fonte. No botão “Categories”, por exemplo, podemos escolher entre os diferentes tipos de fontes e selecionar apenas a opção desejada.

Também é possível selecionar um idioma específico ou deixar na configuração padrão, que retorna todas as linguagens disponíveis.

Selecione por categoria

Como mencionamos, podemos selecionar as fontes por categoria. Esse recurso facilita a pesquisa por determinados formatos de fontes. As fontes do tipo Display, por exemplo, são mais indicadas para cabeçalhos e áreas que precisem de destaque.

Já o tipo Sans Serif são fontes que não contêm serifa, que é um pequeno traço nas extremidades da letra, enquanto as do tipo Serif são aquelas que contêm esse traço. Portanto, indicar a categoria desejada ajuda a trazer os resultados mais apropriados, de acordo com a necessidade de utilização da fonte.

Cheque as propriedades da fonte

Outra forma de seleção muito útil é utilizar as propriedades da fonte. Podemos selecionar alternativas que contenham acima de determinado número de estilos, por exemplo, além de selecionar a espessura, a inclinação e a largura desejada. Dessa forma, fica mais fácil retornar as fontes que atendam ao critério especificado.

Vale ressaltar que é possível combinar todos os filtros que mostramos acima para fazer uma busca ainda mais detalhada. Portanto, esse é um poderoso recurso para pesquisar fontes na plataforma e deixar o seu site muito mais elegante e refinado.

Baixe a fonte

Nessa página que foi aberta, há uma opção no canto superior direito da tela, com um sinal de “+”, e a opção Select This Font (“Selecione esta fonte”).

Basta clicar para reservá-la e, então, uma janela aparecerá minimizada na parte inferior da tela.

Depois disso, basta clicar na janela minimizada na parte inferior da tela. Ela se abrirá e mostrará o código, que você dele colar no HTML do seu site para que ele mostre a fonte em questão. Há, também, uma aba em que você pode customizar a aplicação dessa fonte.

No canto superior direito da janela você verá o ícone de download, bastando clicar nele para baixar a fonte para seu computador.

Quando o arquivo for baixado, lembre-se de descomprimir para que a fonte fique disponível.

Instale no site WordPress

O último passo é direto no WordPress. Quem gerencia o site por meio dessa plataforma CMS pode fazer a instalação de maneira muito mais fácil.

Para isso, basta baixar o plugin Easy Google Fonts, e ele ajudará a realizar esse processo de maneira simples, sem mexer no código do site.

Após baixar e instalar o plugin, basta encontrar a sua fonte que foi baixada (ela aparecerá na lista que o Easy Google Fonts disponibiliza) e ativá-la. O processo é bem simples e muito mais rápido quando feito dessa forma!

Como mencionamos, também é possível fazer a cópia do código HTML e editar o código fonte do site. Entretanto, essa alternativa deve ser feita por pessoas com conhecimento em programação, pois qualquer edição errada pode comprometer o funcionamento do site.

Por isso, a utilização de plugins para a realização dessa tarefa, além de ser mais fácil, evita o risco de maiores complicações.

Escolher a fonte ideal para o seu site não precisa ser mais uma dor de cabeça! Usar o Google Fonts é a melhor saída para encontrar o estilo ideal de letras e numerais para o projeto. Assim, você pode causar o impacto desejado nos seus usuários.

Em busca de outros bons plugins de WordPress? Confira os 63 melhores gratuitos da nossa seleção!