Google font directory

Em um artigo que escrevi sobre o uso de @font-face e a conversão de fontes do formato TTF para EOT abordei o modo mais prático de implementação de fontes diversas para criação de sites mais, digamos, elaborados. Expliquei como e com o que converter fontes, e as linhas de código em CSS para implementação.

Agora vou explicar novamente o uso do @font-face abordando uma, na verdade duas, ajudas muito bem-vindas do gigante do Vale do Silício: a Google font API e o Google font directory.

As vantagens de usar a API do Google são:

  • Com apenas uma linha de código (na verdade um link), substituimos aquelas poucas linhas que expliquei para “embedar” uma fonte;
  • Não é necessário fazer a conversão de TTF para EOT.
  • Não é necessário baixar qualquer script ou fonte;

A desvantagem é ainda a pouca variedade de fontes. Mas acredito que novas famílias de fontes vão ser incluídas nesse diretório de tempos em tempos. E, falando em desvantagem, não creio que apontar um link diretamente para o servidor do Google seja uma. Só para sua informação. Vamos ao que interessa.

Usando a Google font API

Tela inicial do Google font directory listando as fontes que podem ser utilizadas com CSS via @font-face

Não tem segredo, você escolhe uma fonte que deseja “embedar” e insere um link entre as tags <head> de sua página. Aqui um exemplo usando a fonte Tangerine.

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style type="text/css">
body {
    font-family: "Tangerine", serif;
    font-size: 48px;
}
</style>
</head>
<body>
<h1>Making the Web Beautiful!</h1>
</body>
</html>

Outra opção que não seja por link é importar a fonte diretamente da tag style no cabeçalho de sua página (ou de um arquivo CSS externo).

<html>
<head>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Tangerine);
body {
    font-family: "Tangerine", serif;
    font-size: 48px;
}
</style>
</head>
<body>
<h1>Making the Web Beautiful!</h1>
</body>
</html>

Tanto por link quanto por @import, a URL vem sucedida com o nome da fonte, e você pode escolher mais de uma usando o caractere “|” e “+” para quando o nome da fonte tiver espaços (por exemplo, para “Droid Sans” escreva “Droid+Sans“).

http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

A API do Google traz a versão normal (regular) das fontes por padrão. Para suas variantes (itálico e negrito), adicione dois pontos “:” após o nome da fonte com os parâmetros separados por vírgula “,“.

http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

Para cada estilo da fonte existe uma abreviação:

EstiloPARÂMETRO
italicitalic ou i
boldbold ou b ou um valor numérico, ex. 700
bold italicbolditalic ou bi
http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

É necessário Javascript?

Não satisfeitos, os desenvolvedores do Google ainda criaram uma biblioteca em Javascript para evitar o chamado FOUC (Flash Of Unstyled Content) causado pela “demora” no carregamento da fonte. Acontece quando uma fonte padrão é carregada e logo depois a fonte correta. Mas isso não demora mais que alguns décimos de segundo.

Totalmente voltada para desenvolvedores, acho desnecessário explicar seu uso aqui. No entanto, caso seja de seu interesse, acesse http://code.google.com/apis/webfonts/docs/webfont_loader.html

Para mais informações sobre a Google font API acesse http://code.google.com/apis/webfonts (em inglês)