quinta-feira, 20 de maio de 2010

Novidade: Fontes gratuitas do Google, com API e diretório

Ontem foi mais um dia em que o Google anunciou várias novidades na  sua convenção IO2010, dentre as quais vou destacar aqui, uma que me chamou a atenção: A inserção das fontes do Google em um site/blog, um API na qual com um único link colocado no código de seu site/blog, você será capaz de usar fontes online que estão armazenadas gratuitamentes nos servidores do Google. E funciona em qualquer versão do IEca!!! (Até o IEca 6!).

A coisa toda é muito simples, basta inserir um link semelhante à esse abaixo no código de seu site/blog:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

O link faz a chamada da fonte desejada, ele deve ser colocado entre as tags <head> e </head>, e no CSS você define a familía da font (font-family) e o seu tamanho (font-size). O códigoda página deve ficar parecido com o que está abaixo:

<!DOCTYPE html>

<html lang="pt-br">
<head>
 <meta charset="utf-8">
 <title>untitled</title>
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'> <style>
 body { font-family: 'tangerine', serif; font-size: 100px; }
 </style>
</head>
<body>
     O Crazyseawolf é um gato!!!
</body>
</html>
 Eis o resultado:


No exemplo acima, foi usada a fonte Tangerine. Nesta página, há um diretório das fontes do Google, onde clicando em cada fonte, você terá uma visão de como ela é e você pode pegar o link referente à fonte que você vai escolher para colocar no site/blog:


Divertido, não? Existem outros detalhes a serem acrescentados, caso esse post agrade, há outras customizações que podem ser feitas no código do template de seu site/blog, e que terei o prazer de postar.

Nenhum comentário:

Postar um comentário

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Artigos recentes

Linkem me:

Related Posts with Thumbnails
Google