Quante volte ci è stato chiesto (o ci siamo chiesti): "Puoi (o posso) usare questo font nel sito?"
La risposta è stata sempre la stessa: "No, solo font supportati dai broswer...come il Times, Verdana, Arial, etc..."
Il problema principale è che se il font non è installato sul client (il pc del visitatore) o configurato correttamente sul server (il pc che ospita il sito) non può essere utilizzato come font in una pagina web.
Oggi Google mette a disposizione una propria Font Directory dove vengono raccolti alcuni fonts che in situazioni normali non sarebbero utilizzabili in una pagina web ma, grazie alle Google Font API, possono essere importate facilmente.
Ecco come fare:
- Bisogna importare il css dal repository di Google indicando il nome del font desiderato:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Reenie+Beanie">
- Applicare il font ad un elemento o una classe nel css della pagina:
<style>
h1 {
font-family: 'Reenie Beanie', serif;
font-size: 48px;
}
</style>
-
E... fatto! Al testo di tipo H1 verrà applicato un font Lobster. Questo l'esempio completo:
<html>
<head>
<link rel="stylesheet" type="text/css"
href="http://fonts.googleapis.com/css?family=Reenie+Beanie">
<style>
h1 {
font-family: 'Reenie Beanie', serif;
font-size: 48px;
}
</style>
</head>
<body>
<h1>Factory Lab</h1>
</body>
</html>
E questo il risultato:
Se si vogliono utilizzare più fonts nella stessa pagina, evitate di duplicare la chiamata al css di google per non creare richieste multiple ma semplicemente utilizzate un url di questo tipo:
http://fonts.googleapis.com/css?family=Vollkorn|Yanone|Droid+Sans
Google Font rappresenta un ottimo strumento - semplice e gratuito - di tipo Font-as-Service che facilita web designer o semplici appassionati a creare siti leggeri. In alternativa infatti bisognerebbe creare il testo come un immagine non vettoriale aumentando i tempi di caricamento del sito stesso.
Di contro possiamo dire che la directory contiene per il momento pochi fonts e si spera che in futuro aumenteranno.
Meglio ancora se tutti i browser diventeranno compatibili con tutti i fonts senza appoggiarsi a servi esterni...
76d5060a-1665-4ed4-b20b-31c23db510a4|0|.0