CSS Fontes do Google
Para usar fontes do Google basta adicionar link da fonte na
seção <head> </head>
Fonte SOFIA
Na prática
<!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>Fonte Sofia</h1>
<p>Primeiro paragráfo. </p>
<p>123456790</p>
</body>
</html>
Fonte Trirong
<!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> Fonte Trirong
</h1>
<p>Primeiro parágrafo.
</p>
<p>123456790</p>
</body>
</html>
Fonte Audiowide
<!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> Fonte Audiowide
</h1>
<p>Primeiro parágrafo.
</p>
<p>123456790</p>
</body>
</html>
várias fontes do
Google
<!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">Fonte Audiowide </h1>
<h1
class="b">Fonte Sofia </h1>
<h1
class="c">Fonte Trirong </h1>
</body>
</html>
Estilizando fontes do Google
<!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>Fonte Sofia
</h1>
<p>Primeiro parágrafo.
</p>
<p>123456790</p>
</body>
</html>
Habilitando Efeitos de Fonte
<!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 em chamas</h1>
<p
class="font-effect-fire">Primeiro parágrafo. </p>
<p
class="font-effect-fire">123456790</p>
</body>
</html>
vários efeitos à fonte
"Sofia"
<!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">Efeito Neon</h1>
<h1
class="font-effect-outline">Efeito Contorno</h1>
<h1
class="font-effect-emboss">Efeito de Relevo</h1>
<h1
class="font-effect-shadow-multiple">Efeito de Sombra
Múltipla</h1>
</body>
</html>