Google Font API, Como Usar.
26 de maio de 2010, 16:39 | Postado em Cookbook, Desenvolvimento
Durante o Google I/O 2010, a Google lançou seu diretório com fontes para web em alta qualidade para você usar através da Google Font API.
A Google Font API foi criada para auxiliar o uso de fontes em qualquer página web e independente do navegador que é usado. Veja algumas vantagens da Font API:
- Economia de Banda;
- Fácil de usar;
- Suporte para estilos;
- Não é necessária a conversão para o formato suportado pelo IE;
- Fontes Open Source;
Desvantagens:
- Pouca variedade de fontes, por equanto;
Google Font Directory
A Google tabmém criou o Google Font Directory, um catálogo de fontes de alta qualidade para quem utiliza a Font API, basta escolher uma fonte e copiar o código. As fontes do diretório são open source e podem ser usadas em qualquer projeto comercial ou não comercial. Confira as fontes disponíveis, clique aqui.
Tudo isso na prática
Tudo é muito bom e bonito, mas como usar? Além de bom e bonito, é muito mais fácil do que se imagina, segue um código de exemplo:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'>
<style>
h1 {
font-family: 'Josefin Sans Std Light', serif;
font-size: 48px;
}
</style>
</head>
<body>
<h1>Google Font API + Google Font Directory!</h1>
</body>
</html>
Resultado:
Google Font API + Google Font Directory!
Legal né? Vamos trabalhar um pouco mais com essa API. Vamos ver como determinar uma familía de fontes e estilos em nossa url. Começamos com a URL básica da Google Font API
http://fonts.googleapis.com/css
Em seguida, adicione o parâmetro family na URL, com uma ou mais fontes que deseja carregar, por exemplo:
http://fonts.googleapis.com/css?family=Inconsolata
Para solicitar mais famílias de fontes, use o caractere Pipe ( | ) para separar os nomes, por exemplo:
http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
Atenção: Nomes que são separados por espaço, utilize o sinal de mais ( + ) para substituir os espaços.
A API tabém permite customizar o estilo da família de fontes que você acabou de carregar, basta colocar dois pontos ( : ) ao nome da família e chamar os estilos que deseja, por exemplo:
http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
Para saber quais estilos a fonte suporta, consulte a fonte no Google Font Directory
WebFont Loader
O WebFont Loader é uma biblioteca em JavaScript que permite ter mais controle sobre o carregamento da Font API. Vamos ver um exemplo na prática:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
</script>
<script type="text/javascript">
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
}
});
</script>
<style type="text/css">
.wf-inactive p {
font-family: serif
}
.wf-active p {
font-family: 'Tangerine', serif
}
.wf-inactive h1 {
font-family: serif;
font-size: 16px
}
.wf-active h1 {
font-family: 'Cantarell', serif;
font-size: 16px
}
</style>
</head>
<body>
<h1>Usando Cantarell</h1>
<p>Usando Tangerine!</p>
</body>
</html>
Esse exemplo exibe o texto no padrão serif e após carregar as fontes, exibe o texto nas fontes especificadas. Também é possível usar o WebFont Loader com o Google AJAX API, para saber mais sobre o WebFont Loader, clique aqui.