Fontes CSS do Google

Índice

Mostrar índice

Fontes do Google

Se não quiser usar nenhuma das fontes padrão em HTML, você pode usar o Google Fonts.

O Google Fonts é de uso gratuito e tem mais de 1.000 fontes para você escolher.

Como usar fontes do Google

Basta adicionar um link de folha de estilo especial na seção <head> e depois consultar a fonte no CSS.

Exemplo

Aqui, queremos usar uma fonte chamada “Sofia” do Google Fonts:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  
  font-family: "Sofia", sans-serif;
}
</style>
</head>

Resultado:

Sofia Font

Lorem ipsum dolor sit amet.

123456790

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>

Exemplo

Aqui, queremos usar uma fonte chamada “Trirong” do Google Fonts:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
  
  font-family: "Trirong", serif;
}
</style>
</head>

Resultado:

Trirong Font

Lorem ipsum dolor sit amet.

123456790

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
  font-family: "Trirong", serif;
}
</style>
</head>
<body>

<h1>Trirong Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>

Exemplo

Aqui, queremos usar uma fonte chamada “Audiowide” do Google Fonts:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
  
  font-family: "Audiowide", sans-serif;
}
</style>
</head>

Resultado:

Audiowide Font

Lorem ipsum dolor sit amet.

123456790

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
  font-family: "Audiowide", sans-serif;
}
</style>
</head>
<body>

<h1>Audiowide Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>

Observação: ao especificar uma fonte em CSS, sempre liste em no mínimo uma fonte substituta (para evitar comportamentos inesperados). Portanto, também aqui você deve adicionar uma família de fontes genérica (como serif ou sans-serif) ao final da lista.

Para obter uma lista de todas as fontes do Google disponíveis, visite nosso tutorial Como fazer - Google Fonts.

Use várias fontes do Google

Para usar várias fontes do Google, basta separar os nomes das fontes com uma barra vertical caractere (|), assim:

Exemplo

Solicite várias fontes:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
  h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", 
  sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>

Resultado:

Audiowide Font

Sofia Font

Trirong Font

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {
  font-family: "Audiowide", sans-serif;
}

h1.b {
  font-family: "Sofia", sans-serif;
}

h1.c {
  font-family: "Trirong", serif;
}
</style>
</head>
<body>

<h1 class="a">Audiowide Font</h1>

<h1 class="b">Sofia Font</h1>

<h1 class="c">Trirong Font</h1>

</body>
</html>

Observação: solicitar várias fontes pode tornar suas páginas da web mais lentas! Portanto, tenha cuidado com isso.

Estilizando fontes do Google

Claro que você pode estilizar o Google Fonts como quiser, com CSS!

Exemplo

Estilize a fonte "Sofia":

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  
  font-family: "Sofia", sans-serif;
  font-size: 30px;
  
  text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>

Resultado:

Sofia Font

Lorem ipsum dolor sit amet.

123456790

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
  text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>

Habilitando efeitos de fonte

O Google também habilitou diferentes efeitos de fonte que você pode usar.

Primeiro adicione effect=effectname à API do Google, em seguida, adicione um nome de classe especial ao elemento que usará o especial efeito. O nome da classe sempre começa com font-effect- e termina com nome do efeito.

Exemplo

Adicione o efeito de fogo à fonte “Sofia”:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
  
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
  <body>
<h1 class="font-effect-fire">Sofia on 
  Fire</h1>
</body>

Resultado:

Sofia on Fire

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
<body>

<h1 class="font-effect-fire">Sofia on Fire</h1>
<p class="font-effect-fire">Lorem ipsum dolor sit amet.</p>
<p class="font-effect-fire">123456790</p>

</body>
</html>

Para solicitar vários efeitos de fonte, basta separar os nomes dos efeitos com uma barra vertical (|), assim:

Exemplo

Adicione vários efeitos à fonte “Sofia”:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
  
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
  <body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline 
  Effect</h1>
<h1 class="font-effect-emboss">Emboss 
  Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple 
  Shadow Effect</h1>
</body>

Resultado:

Neon Effect

Outline Effect

Emboss Effect

Multiple Shadow Effect

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
<body>

<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>

</body>
</html>