Como utilizar o Google Web Fonts -exemplo prático

O Google Web Fonts serve para você utilizar uma grande quantidade de fontes em seus projetos diversas daquelas tradicionalmente usadas. Para implementar é bem simples, acesse o serviço nesse link, escolha uma fonte que mais combina com seu projeto. Clique em Quick-use conforme a imagem abaixo:

font1

Agora precisaremos copiar esse código para o “head” de nossa página html:

font2

Colocando o código no exemplo:
Na follha de estilo (css) vamos adicionar o seguinte código:

</pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
<head>
<link rel='stylesheet' href='style.css' type='text/css' media='screen' />
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <link href='http://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css'>
 <title>Google fontes</title>
 </head>
<body>
<div id="box">
<p><a href="#" class="link">Link</a></p>
</div>
</body>
</html>
<pre>

font3

No nosso exemplo a folha de estilo ficou assim:


*{
 margin:0px;
 padding:0px;
 border:0px;
 }
 body{
 font-family: 'Monoton', cursive;

}
 #box{
 width:500px;
 height:200px;
 margin:200px auto;
 }
 a.link{
 font-size:200px;
 color:black;
 text-decoration:none;
 }
 a.link:hover{
 color:red;
 }
 

Clique aqui para ver o exemplo online.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s