Houve uma época sombria da internet em que um site só poderia ser considerado de boa usabilidade se exibisse textos em Arial ou Times New Roman. Houve uma época ainda mais escura em que era aceitável usar Comic Sans — é melhor nem lembrar disso!
A verdade é que desde que o Google resolveu atacar o problema de forma definitiva com seu Fonts API, os designers ganharam muito mais customização e expressão para seus trabalhos de design. É por isso que vamos te mostrar agora por que usar Google Fonts em freelances de webdesign é a melhor solução para você. Confira!
O que é uma Google Fonts
Afinal, o que significa Google Fonts API? Esse é o nome da interface de programação de aplicações que a gigante de buscas criou para facilitar o trabalho dos web designers na hora de escolher a tipografia de um site.
Antigamente, os navegadores só conseguiam exibir as fontes de uma página na web caso elas estivessem instaladas no computador do usuário. Isso limitava muito a criatividade dos profissionais de web, que ficavam restritos às fontes do sistema para não causar problemas de visualização (como Arial, Verdana, Times New Roman, etc).
Com a API do Google, as fontes são renderizadas utilizando um diretório na nuvem, sem a necessidade de tê-las instaladas no sistema de quem visualiza a página. É uma mudança simples, mas que abre um novo mundo de possibilidades para o freelancer que quer mais qualidade e estilo em seu trabalho.
Por que usar Google Fonts em freelances de webdesign
Não é à toa que web designers vêm integrando esse diretório de fontes em seus trabalhos. Não é porque todos gostamos do Google, mas sim porque elas proporcionam vantagens competitivas e de conceito para o freelancer que busca se destacar da concorrência.
Os principais benefícios da utilização do Google Fonts são a licença comercial gratuita, facilidade de implementação, ganho em usabilidade, popularidade da fonte e, por fim, liberdade de estilização.
Licença comercial gratuita
O primeiro benefício já é um belo incentivo para começar a usar o Google Fonts. Você deve imaginar que todo designer freelancer sabe como é difícil encontrar fontes de qualidade que fujam dos padrões do sistema sem ter que apelar para a pirataria.
Pois é, esses dias acabaram! O diretório do Google oferece mais de 800 famílias de fontes de alta qualidade técnica e visual, gratuitas e com código aberto. Isso significa que você pode baixar, usar e modificar qualquer uma delas do jeito que você quiser.
Facilidade de implementação
O Google criou seu diretório de fontes pensando especificamente em seu uso para a internet. Por isso, é muito fácil procurar e adicionar famílias aos seus freelas de webdesign, inclusive em temas WordPress.
Todas elas possuem o mesmo sistema unificado de implementação para CSS e HTML. Assim, basta escolher a Google Font que você quiser, copiar o código e adicioná-lo a página que você está construindo.
Ganho em usabilidade
Uma grande vantagem desse diretório é a variedade de famílias de fontes para os vários usos que você pode ter em uma página. Basta definir sua prioridade para a usabilidade que você procura.
Você quer uma página mais legível? Para uso preferencial no mobile? Você quer fontes display para integrar gráfico e usabilidade? É só procurar o que precisa e começar a integração!
Como não é só de leitura que se mede a usabilidade, você também deve se preocupar com a leveza do site e com o quão rápido a sua página é visualizada. Pensando nisso, o Google categoriza as fontes por tempo de carregamento (load time), de rápido a lento, para você saber com objetividade o quanto aquela família impactará no peso da sua página.
Popularidade da fonte
Um site não precisa ter fontes nunca utilizadas para ser considerado inovador. Muitas vezes, aquilo que já é bem estabelecido é a escolha segura e agradável para seu site. Ao buscar uma fonte no Google Fonts você pode verificar a popularidade dessa fonte em diferentes países.
Além disso, também é possível saber a totalidade de websites que utilizam a fonte escolhida. Um exemplo é a fonte Montserrat que é mais utilizada nos Estados Unidos, mas também é popular no Brasil. No total, mais de 4 milhões de websites a utilizam.
Isso vai te ajudar a escolher a fonte baseado na popularidade dela no país do cliente. Isso porque, se o seu cliente é brasileiro, talvez seja interessante utilizar uma fonte que seja mais popular no Brasil.
Liberdade de estilização
É claro que para um designer é importante imprimir seu estilo depois que a usabilidade está resolvida. É nessa hora que um freelancer precisa fugir das fontes padrão para conseguir mostrar a sua capacidade de estética e de conceito.
O diretório do Google oferece fontes com e sem serifa, fantasia e display, escritas a mão e monospace, ou seja, opções para todos os casos na hora de diagramar o seu projeto.
Como incluir uma Google Fonts no seu design
É muito fácil adicionar uma fonte do Google em seu projeto, seja seu site de portfólio ou em um freela de webdesign. Explicaremos aqui como adicionar em um website “tradicional”, porém mais adiante você também entenderá como utilizar o Google Fonts em um site WordPress. Veja os passos a seguir:
1. Escolha a fonte
Entre em https://fonts.google.com/. Infelizmente o site está apenas em inglês, mas é muito fácil navegar nele. Você pode passear por todo o diretório até encontrar o que precisa, mas também pode utilizar a busca para procurar um nome e refinar resultados por categoria.
2. Selecione a fonte
Selecione as famílias de fonte que você preferir clicando no sinal “+” ao lado do seu nome. Fazendo isso, a família escolhida será adicionada a um menu no pé da página. Nessa etapa você pode escolher quantas fontes quiser, pois a cada vez que você a adiciona, ela é inserida no código final.
3. Customize a família selecionada
Ao abrir o menu com as fontes que você escolheu, vá até a aba “CUSTOMIZE” para adicionar todos os pesos que você pensa em utilizar no seu design. Nesse momento, tome cuidado!
Quanto mais opções de peso você selecionar, maior será a influência da fonte no tempo de carregamento da página. Use apenas as que forem necessárias para garantir seu estilo e a usabilidade do site.
Essa aba já vem com uma opção de customização selecionada, que é a opção padrão, porém, você pode selecionar outras opções de peso e adicionar tudo o que foi selecionado no código de importação.
4. Adicione Google Fonts ao seu código
Fontes definidas, é hora de importá-las para o seu trabalho. No mesmo menu de famílias selecionadas, a aba “EMBED” gerará o código que você precisa para usar a fonte. Você pode tanto usar o método href tradicional do HTML como a regra @import no CSS do seu site.
Além disso, o Google gera também a regra para você especificar o uso das famílias no código de estilo, o que é bastante útil e didático para você não errar!
A parte interessante do Google Fonts é que ele gera um único código para todas as fontes que você incluiu com o botão “+”, não sendo necessário, portanto, copiar um código para cada fonte.
O diretório do Google Fonts surgiu como a solução para a dificuldade que os designers tinham em variar e surpreender em seus projetos de webdesign. Entender como ele funciona e aprender a usá-lo é essencial para um freelancer se destacar da concorrência em personalidade, eficiência e profissionalismo.
Como usar o Google Fonts em um site WordPress
Você já sabe como adicionar uma fonte do Google Fonts no seu website, mas como fazê-lo quando é um site em WordPress?
Existem duas formas de utilizar o Google Fonts nos temas: modificando o código-fonte ou utilizando plugins.
Modificação do código
Muitos consideram essa forma como o jeito “correto” de implementar as fontes do Google Fonts. Os primeiros passos são iguais aos passos para adicionar o Google Fonts em qualquer site, como explicamos acima.
A diferença é que você precisa localizar o arquivo header.php no servidor do seu site e colar o código abaixo, substituindo o conteúdo do primeiro “href” pelo link que você copiou da sua fonte. Além disso, o conteúdo do segundo “href” deve conter o link da sua folha de estilos (stylesheet):
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Lora|Oswald” media=”screen”>
<link rel=”stylesheet” type=”text/css” href=”SUA FOLHA DE ESTILO” media=”screen”>
Depois de incluir o código no header.php, você pode editar normalmente o seu arquivo CSS utilizando a linguagem padrão, como:
h1 {font-family: Oswald, Helvetica, Arial, serif;}
Utilização de plugins
Os passos acima permitem que você utilize o Google Fonts no seu tema WordPress. Contudo, essa forma pode não ser muito interessante para designers que não gostam de modificar códigos, pois além da alteração do PHP, ainda é preciso alterar o CSS no arquivo style.css. Não é uma tarefa difícil, mas existe uma opção muito mais automatizada de fazer isso, utilizando plugins.
Existem diversos plugins que fazem a instalação do Google Fonts no WordPress, sendo que os mais utilizados são o Google Fonts (Theme Trust), Easy Google Fonts (Titanium Themes) e WP Google Fonts (Noah Kagan).
Google Fonts, de Theme Trust
Esse plugin é interessante porque ele se instala diretamente na tela “personalizar” do tema, assim você pode ver em tempo real as modificações realizadas nas fontes.
Depois de instalar e ativar o plugin, é só navegar até o painel de personalização do tema e escolher as fontes. Você pode modificar todo o texto do tema para a fonte desejada ou escolher fonte para cada uma das outras 7 opções, entre cabeçalho 1, 2 e 3, links, blockquotes e listas.
Além disso, ainda é possível inserir um controlador CSS personalizado. Por exemplo, caso você queira alterar as fontes do H3 apenas no footer, é só inserir o seletor no campo CSS.
Easy Google Fonts, de Titanium Themes
O Easy Google Fonts é outro plugin bastante parecido com o anterior, pois também se integra a tela de personalização do tema. Contudo, ele possui mais recursos e opções, como alterar posicionamento e aparência, além, é claro, da possibilidade de incluir códigos CSS personalizados.
WP Google Fonts, de Noah Kagan
Já o WP Google Fonts é um pouco menos amigável do que os anteriores, pois a personalização das fontes não é feita no menu “Personalizar” do tema, mas sim na tela “Configurações” do painel de administrador do WordPress. Vale a pena conferir cada um deles para encontrar qual você mais se identifica.
Como encontrar fontes que combinam entre si
Você já sabe como utilizar as fontes do Google Fonts no seu projeto, seja em websites tradicionais ou WordPress. Você até já escolheu a melhor fonte para utilizar no cabeçalho principal do seu site, mas ainda falta encontrar outras fontes que combinam com a que você gostou.
Há quem diga que a fonte é 95% da beleza do site, ou seja, um site com péssimas escolhas de fontes, ou letras que não combinam entre si, será classificado como de “má qualidade”, mesmo que o design dos elementos seja inovador e agradável.
Contudo, encontrar fontes que combinam para utilizar nos cabeçalhos e corpo do site é uma tarefa bastante demorada e difícil, principalmente para quem ainda não tem muita experiência nessa tarefa.
Essa é uma vantagem de utilizar o Google Fonts. Quando você encontra uma fonte, o próprio site já sugere as fontes que mais foram utilizadas em conjunto com a escolhida. Por exemplo, se você escolher a fonte Montserrat, a ferramenta mostra que as fontes mais utilizadas junto com ela são a Open Sans, Roboto, Raleway e Lato.
É uma funcionalidade que vai poupar muita dor de cabeça, além de evitar que seu projeto fique desagradável devido as fontes escolhidas.
Deu para notar que o Google Fonts é um recurso valioso que dará aquele aspecto profissional e de qualidade aos seus trabalhos, sejam eles sites tradicionais ou em WordPress.
Agora que você está pronto para usar Google Fonts em freelances de webdesign, é hora de pôr em prática seus conhecimentos — não só para dar estilo ao seu design como para facilitar a vida dos usuários que seu cliente quer atrair. Para isso, assine nossa newsletter e fique por dentro de todas as novidades da área de webdesign!
