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:
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á!