Como Utilizar o Google Fonts - Passo a Passo Ilustrado

Google Fonts é um diretório de fontes que você pode usar gratuitamente em seu site ou blog. Se está querendo saber como utilizar o Google Fonts, você está no lugar certo. Neste artigo, vou te mostrar o passo a passo de como começar a usar uma fonte em menos de 5 minutos.

O que é o Google Fonts? Google Fonts é uma coleção com centenas de fontes open source e gratuitas para uso pessoal ou comercial em seus projetos. A coleção existe desde 2010 como iniciativa de tornar a web mais rápida e moderna.

Agora que você sabe o que é, acompanhe o próximo parágrafo para entender como utilizar.

Como utilizar o Google Fonts

1. Acesse o Google Fonts

Visite o site do Google Fonts em fonts.google.com. Lá você tem acesso à mais de 900 fontes gratuitas para uso pessoal ou comercial.

Na aba Directory / Diretório, no menu à direita você pode filtrar pelo estilo da fonte (serifada, sem serifa, manuscrita, etc.), pelo peso, linguagem e popularidade.

No centro você tem todas as fontes disponíveis. Cada fonte tem uma variedade de estilos e pesos, portanto se você procura a variação "Roboto Light", por exemplo, vai encontrar em "Roboto".

2. Pesquise por fontes

Se você já tem uma fonte em mente, pesquise pelo nome da fonte no campo "Search" no canto superior direito.

Você pode clicar no texto logo abaixo do nome da fonte para customizar e ver como ficaria com seu próprio conteúdo. Neste caso escrevemos "Exemplo de texto" para te localizar. Você pode também ver como o texto ficaria com diferentes pesos, aplicando negrito, etc. E alterando o tamanho em pixels.

Clicando no nome da fonte, você tem uma série de informações sobre ela, como o seu Autor ou Designer, o seu uso em vários países e a quantidade de vezes que foi utilizada no Google Fonts na última semana - Com essa informaçõ é possível ter uma boa noção sobre a popularidade de uma fonte.

Lembrando que como a ideia deste diretório é reunir as melhores fontes livres disponíveis, se você procurar por uma fonte comercial, é possível que seja retornado apenas resultados com links para sites externos, onde você pode comprar a fonte. Esse é o caso da fonte "Arial", por exemplo.

Apesar de ser incluída no Windows, ela não é uma fonte livre para ser usada gratuitamente em qualquer projeto. E esse é o caso da maioria das fontes embutidas em sistemas operacionais.

Felizmente você tem uma alternativa: Recomendo o site Identifont, para encontrar fontes gratuitas, similares à qualquer outra fonte comercial. Basta digitar o nome da fonte e ver a listagem de fontes similares ao lado esquerdo. Depois é só procurar por essa fonte no Google Fonts.

3. Clique no "+" para adicionar a fonte desejada

Depois que você encontrou a fonte desejada, clique no sinal de mais ao lado direito do nome da fonte.

Logo em seguida vai aparecer uma janela na parte inferior da tela.

Caso queira selecionar mais fontes, basta continuar procurando e clicando no botão de "+".

4. Customize sua fonte

Clique na janela que apareceu depois adicionar a fonte. Ela vai se expandir.

Clique no menu "CUSTOMIZE" para selecionar diferentes pesos ou linguagens para sua fonte.

Fique atento ao indicador "Load Time", no canto superior direito da janela. Pois ele indica a velocidade de carregamento da fonte. Quanto mais fontes e estilos você adicionar, mais pesado será o carregamento da sua página. Tente manter esse indicador verde para garantir um carregamento rápido.

O que são os pesos?

Os pesos tem a ver com a espessura ou intensidade da fonte. Para as fontes mais elaboradas, não existe só o formato regular e negrito como estamos acostumados, mas podem haver variações mais finas (light), variações seminegrito (semi-bold), negrito (bold), extranegrito (extra-bold), negrito + itálico (bold italic), etc.

Por exemplo, se você quer adicionar suporte à texto em negrito e itálico, precisa selecionar pesos "bold", "italic" e possivelmente "bold italic" neste caso.

Algumas fontes não possuem diferentes pesos e ficam limitadas ao uso regular, sem negrito/itálico, etc.

Sobre linguagens

Algumas fontes possuem suporte à caracteres diferenciados presentes no Grego, Vietnamita, etc. Raramente alguém utiliza caracteres para além do "Latin", que cobre a maioria dos caracteres presentes nas línguas ocidentais. Mas se esse for o seu caso, precisa selecionar diferentes linguagens.

5. Adicione a fonte ao seu site

Depois de ter adicionado e customizado nossa fonte. Temos a opção de baixar a fonte através do ícone de download no canto superior direito, ou de incorporar a fonte ao nosso site diretamente através do Google Fonts.

A solução mais simples é embutir a fonte em nosso site diretamente. Pois não precisamos baixar nem hospedar as fontes em nosso próprio site.

Incorporando a fonte em seu site

Na janela de seleção da(s) fonte(s), clique na aba "EMBED". Você verá dois códigos:

• O primeiro, na aba "STANDARD", é o código HTML que permite que você adicione a fonte ao seu site. Ele deve ser colado na tag <head> em seu site. Falaremos abaixo também sobre "@IMPORT".
• O segundo é o código CSS, que especifica o nome da fonte. Devemos copiar esse código para dentro da classe correta para que a fonte seja atribuída ao elemento de texto desejado.

Veja os exemplos abaixo para entender melhor.

Exemplos

1. Exemplo com uma fonte para o site todo

Neste primeiro exemplo usamos a forma padrão (Standard) de incorporar a fonte. Note que adicionamos o primeiro código do Google Fonts na tag <head>, e o segundo código também na tag <head>, só que adicionamos à uma tag <style> que configura o código CSS da página.

Se você tiver condições de alterar um arquivo CSS do seu site, fica melhor se você incluir esse segundo código dentro do seu arquivo CSS.

A definição da classe body em CSS faz com que todos os textos dentro de <body> tenham a fonte "Open Sans". OBS: É possível que isso não aconteça caso alguma outra regra CSS estiver sobrescrevendo. Neste caso aconselho procurar informação em um tópico específico sobre CSS.

<!DOCTYPE html>
<html>
<head>
	<title>Meu site</title>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400" rel="stylesheet">
	<style>
		body {
			font-family: 'Open Sans', sans-serif;
		}
	</style>
</head>
<body>
	Texto em fonte Open Sans.
</body>
</html>

2. Exemplo com duas fontes

Neste segundo exemplo nós usamos duas fontes. O processo de incorporar a tag <link> com as fontes é o mesmo. A única diferença é que precisamos especificar a regra CSS para determinar em qual tag ou classe nossa fonte será aplicada.

Portanto o que fizemos foi aplicar ao CSS duas regras:

• Tudo o que estiver em body, terá a fonte "Open Sans".
• Todos os títulos (h1 - h6) terão a fonte "Pacifico".

Note que a propriedade font-family aceita multiplos parâmetros, exemplo: 'Pacifico', cursive. Isso significa que o navegador vai tentar carregar a fonte "Pacifico", mas enquanto não estiver carregada, ou se não for encontrada, vai pegar qualquer fonte cursiva padrão do sistema operacional e colocar no lugar. O mesmo vale para a fonte sans-serif (sem serifa) como ressalva para 'Open Sans'.

<!DOCTYPE html>
<html>
<head>
	<title>Meu site</title>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans|Pacifico" rel="stylesheet">
	<style>
		body {
			font-family: 'Open Sans', sans-serif;
		}

		h1, h2, h3, h4, h5, h6 {
			font-family: 'Pacifico', cursive;
		}
	</style>
</head>
<body>
	<h1>Título em fonte Pacifico</h1>
	Texto em fonte Open Sans.
</body>
</html>

3. Exemplo com diferentes pesos

No exemplo abaixo, fazemos uso da propriedade CSS font-weight para especificar qual o peso queremos para determinado elemento CSS.

• Usamos o peso padrão para body apenas não especificando a regra font-weight.
• Adicionamos font-weight: bold para todos os títulos (h1 - h6). Poderíamos também aqui usar o formato numérico font-weight: 700.

Só é possível especificar o peso se nós carregamos a fonte com aquele peso (Veja Open+Sans:400,700 na tag <link>), caso contrário a fonte não será encontrada e o peso mais próximo será usado no lugar.

<!DOCTYPE html>
<html>
<head>
	<title>Meu site</title>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
	<style>
		body {
			font-family: 'Open Sans', sans-serif;
		}

		h1, h2, h3, h4, h5, h6 {
			font-family: 'Open Sans', sans-serif;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<h1>Título em fonte Open Sans negrito</h1>
	Texto em fonte Open Sans regular.
</body>
</html>

4. Usando @import

A regra @import é uma regra CSS usada para importar outros estilos para dentro do seu arquivo CSS ou da tag <style>.

Como alternativa ao método de incorporar fontes com <link>, você também tem a opção de incluir com @import dentro do seu arquivo CSS diretamente. Veja o exemplo abaixo:

<!DOCTYPE html>
<html>
<head>
	<title>Meu site</title>
	<style>
		@import url('https://fonts.googleapis.com/css?family=Open+Sans:400');
		
		body {
			font-family: 'Open Sans', sans-serif;
		}
	</style>
</head>
<body>
	Texto em fonte Open Sans.
</body>
</html>

Quem cria as fontes?

Apesar do nome "Google" Fonts, as fontes em geral são criadas por designers e organizações independentes do mundo inteiro.

Por que utilizar?

Dentre as principais vantagens de se utilizar as fontes através do Google Fonts, estão:

• É de graça: Não precisa licença e nem pagamento para uso pessoal ou comercial. Basta incorporar em seu site e começar a usar.
• Multiplataforma: Alguns sistemas operacionais ou dispositivos requerem formatos específicos. Felizmente o Google Fonts disponibiliza suporte à todos os principais navegadores e dispositivos.
• Mais rápido: Graças à rede de distribuição do Google, em geral é mais rápido usar o Google Fonts do que baixar e hospedar as próprias fontes.