Durante a Conferência Google I/O 2010, o Google lançou seu diretório com fontes
para web em alta qualidade para serem usados através da Google Font API.
A Google Font API foi criada para auxiliar o uso de fontes em
qualquer página web independentemente do navegador que é usado. Veja
algumas vantagens:
- 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 enquanto.
Google Font Directory
A Google també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.
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>
Legal, né? Vamos trabalhar um pouco mais com essa API. Vamos ver como
determinar uma família 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: em nomes que são separados por espaço, utilize o sinal
de mais ( + ) para substituir os espaços.
A API també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.
E, aí, pronto para usar a Google Font em seus projetos?
Até a próxima!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?