Categorias
CSS HTML Programação

Usar a Google Font API na construção de sites

O Google lançou em 2010 a Google Font API e o Google Font Directory para darem suporte às fontes na construção de websites. Apartir dessa data passamos a poder escolher uma fonte dentre das que estão disponíveis no diretório e colocá-la no HTML/CSS do website, e ela funcionará na maioria dos navegadores (browsers).

Assim passou a ser possível 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

Neste artigo vamos ver como usar a Google Font API. É bem simples, para fazermos um teste vamos criar uma pagina HTML com o seguinte código:

<!DOCTYPE HTML>
<head>
<title>Teste da Google Font API</title>
<link href='http://fonts.googleapis.com/css?family=Dr+Sugiyama' rel='stylesheet' type='text/css' />
<style>
     body { font-family: 'Dr Sugiyama', cursive; }
     p { font-size: 26px; }
     h1 { font-size: 36px; }
</style>
</head>
<body>
 <h1>Lorem ipsum dolor sit amet</h1>
 <p>Consectetur adipiscing elit. Phasellus eleifend odio sit amet enim ullamcorper porttitor.<br />
 Etiam vitae mi vel nisl pharetra tempus. Proin faucibus aliquet nunc ut accumsan.<br />
 Etiam tincidunt dolor ut elit molestie pretium. </p>
</body>
</html>

Gravamos a página e visualizamos-a num navegador (browser), o resultado que vamos obtemos será algo deste género:
google-font-api

Usar a Google Font API com vários styles

É possível também denominar outras famílias de fonte e o estilo, utilizando os caracteres (|) para separar a família, (+) no lugar dos espaços no caso de nomes compostos, e (:) para o estilo, dessa forma:

<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,400italic|Sanchez:400,400italic+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

Uma das grandes vantagens na utilização da Google Font API é que deixamo-nos de preocupar se o usuário vai visualizar ou não nossa sua página devido a não ter uma fonte instalada, já que ela ficará sempre nos servidores do Google.

O Google Font Directory, tem 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. Visite o Google Font Directory e escolha a sua preferida!

E você costuma usar o Google Font API? Usa outra API? Comente!

Um abraço e até já!



Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *