02.06.2010

Use diferentes fontes com o Google Font API

A maior decepção para a maioria dos web-designers é não poder usar vários tipos de fontes quando vão fazer um layout para um site em HTML onde o texto é dinâmico.

Atualmente existem diversas maneiras inventadas de conseguir usar as fontes “não padrão” nos sites. Tem algumas soluções que usam Flash, outras em JavaScript, mas nenhuma delas é boa o suficiente para se tornar algo recomendável.

Pensando nisso o Google criou um catálogo de fontes de alta qualidade para o uso dos desenvolvedores, o Google Font API. Ainda não é o que todos nos desejariamos, que seria usar isso nativamente, pois o Google Font API requer o uso de arquivos do Google para poder funcionar, mas é uma ótima solução.

As vantagens do Google Font API em relação aos outros métodos com Flash ou JavaScript são enormes. A unica desvantagem por enquanto é que o catálogo dispõe de poucas fontes, o que imaginamos ser algo que vai crescer com o tempo.

Essa API é compatível com a maioria dos browser que usamos atualmente, como: Chrome versão 4+, Firefox versão 3.5+, Safari versão 3.1+, Opera versão 10.5+ e IE versão 6+.

Usando o Google Font API

Para usa-lo é muito fácil. Veja um exemplo:

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

Repare o código em vermelho que você tem de usar para poder funcionar. Bem simples neh?! Vamos ver agora como funciona o código em detalhe.

Primeiro você usa a URL padrão:

http://fonts.googleapis.com/css

Para usar a fonte Inconsolata por exemplo, adiciona ao link ?family= e o nome da fonte:

http://fonts.googleapis.com/css?family=Inconsolata

Se o seu projeto precisar de mais de uma fonte do Google Font API, adicione ao final do nome da primeira fonte uma | e em seguida o nome da outra fonte:

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

*Nota: repare que as fontes com nome com espaço você tem de adicionar um + no lugar do espaço.

Mudando o estilo da fonte

O Google Font API também permite customizar o estilo da fonte que você quiser usar. Para isso, adicione dois pontos ( : ) ao final do nome da fonte para usar os estilos que quiser, por exemplo:

http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold

As opções de estilo são:
itálico = italic ou i
negrito = bold ou b
negrito e itálico = bolditalic ou bi

Veja quais variações de estilo cada fonte suporta no catálogo de fontes.

O Google também disponibiliza uma biblioteca JavaScript, chamada WebFont Loader, que te dá mais controle sobre o carregamento das fontes.

9 respostas a "Use diferentes fontes com o Google Font API"

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *