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/cssPara usar a fonte Inconsolata por exemplo, adiciona ao link ?family= e o nome da fonte:
http://fonts.googleapis.com/css?family=InconsolataSe 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:boldAs 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.
Ruan Mér
Trabalho na área de desenvolvimento web a mais de 5 anos, especificamente com diagramação de interface web (front-end), usando as tecnologias xHTML, CSS, javascript com a biblioteca jQuery e a criação de sites com WordPress. Ver portfólio >>
9 respostas a "Use diferentes fontes com o Google Font API"