Quante volte in passato ci è stato chiesto (o ci siamo chiesti): “Puoi (o posso) usare questo font nel sito?” La risposta era sempre la stessa: “No, solo font supportati dai broswer…come il Times, Verdana, Arial, etc…“. I tempi poi sono cambiati. Il problema principale era che se il font non era installato sul client (il pc del visitatore) o configurato correttamente sul server (il pc che ospita il sito) non poteva 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>
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.