Autor: Emerson Farias
O Google Web Fonts é uma biblioteca de fontes Open Source (livre para compartilhamento), um serviço API oferecido pela Google que permite adicionar fontes que ficam armazenadas nos seus servidores em um site de forma rápida e simples. Só a nível informativo, ao acessar a página Google Web Fonts, teremos abaixo do logo a quantidade de fontes disponíveis para uso, neste caso, no momento da criação deste artigo existiam 617 fontes.
Vamos ver então como aproveitar este serviço gratuito e inserir uma dessas fontes em seu site. Em nosso exemplo estaremos utilizando a fonte “Kavoon”. Definida a fonte, clique em “Quick-use” conforme imagem.
Na próxima tela, podemos observar um marcador mostrando o impacto no tempo de carregamento da página, uma dica importante é não utilizar muitas fontes diferentes em seu site, isso vai influenciar no tempo de carregamento.
Nesta mesma tela, teremos três métodos (Standard, @import e JavaScript) para chamar a fonte escolhida do servidor Google para o nosso exemplo. Neste artigo estarei abordando o método mais utilizado, que é o “Standard”.
Então na guia Standard, copie e cole o código gerado como o primeiro elemento entre a Tag <head> do seu documento HTML. Pronto! Em seguida, é só especificar o nome da fonte no seu estilo CSS:
Depois é só usar sua criatividade e usar a formatação que você quiser. Aqui apliquei um “text-shadow” à fonte.
01. <html>
02. <head>
03. <link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css'>
04. <style>
05. h1 {
06. font-family: 'Kavoon', cursive;
07. font-size: 50px;
08. color: #FF0000;
09. text-shadow: 5px 5px 5px #555;
10. }
11. </style>
12. </head>
13. <body>
14. <h1>Criatividade Web</h1>
15. </body>
16. </html>
Veja o resultado:
Vamos ver então como aproveitar este serviço gratuito e inserir uma dessas fontes em seu site. Em nosso exemplo estaremos utilizando a fonte “Kavoon”. Definida a fonte, clique em “Quick-use” conforme imagem.
Na próxima tela, podemos observar um marcador mostrando o impacto no tempo de carregamento da página, uma dica importante é não utilizar muitas fontes diferentes em seu site, isso vai influenciar no tempo de carregamento.
Nesta mesma tela, teremos três métodos (Standard, @import e JavaScript) para chamar a fonte escolhida do servidor Google para o nosso exemplo. Neste artigo estarei abordando o método mais utilizado, que é o “Standard”.
Então na guia Standard, copie e cole o código gerado como o primeiro elemento entre a Tag <head> do seu documento HTML. Pronto! Em seguida, é só especificar o nome da fonte no seu estilo CSS:
Depois é só usar sua criatividade e usar a formatação que você quiser. Aqui apliquei um “text-shadow” à fonte.
01. <html>
02. <head>
03. <link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css'>
04. <style>
05. h1 {
06. font-family: 'Kavoon', cursive;
07. font-size: 50px;
08. color: #FF0000;
09. text-shadow: 5px 5px 5px #555;
10. }
11. </style>
12. </head>
13. <body>
14. <h1>Criatividade Web</h1>
15. </body>
16. </html>
Veja o resultado: