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"

  1. Marcelo disse:

    É possível usar isso no WordPress? (domínio próprio)

    Caso sim, como fazer ?

    Obrigado

    Marcelo

  2. Bianca disse:

    Obrigada Ruan! Vi seu portfolio também, muito bom. bjs

  3. Maira disse:

    Oi!
    Consegui mudar a fonte, mas mudou do site inteiro. Estou mudando no editor do WP, coloquei o link do google fonts no header.php e depois coloquei o nome da font no style.css, mas mudou até do menu e dos títulos. Gostaria de mudar para fontes diferentes para o menu/titulos e para o conteúdo da página. Isso é possível?

    Obrigada!!

  4. karoline disse:

    Oii, clico no link do google fonts api e está indisponível, e eu já tentei de varias maneiras e não mudou nada :(

  5. Diego disse:

    Muito bom jovem!

Deixe uma resposta

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