I web font trovano la loro più naturale applicazione con i CSS negli stili assegnati alle intestazioni. Infatti alcuni web font (come quelli messi a disposizione da Google) sono particolarmente indicati per dare risalto alle intestazioni e ai titoli delle nostre pagine. In questo articolo vedremo una serie di intestazioni che fanno uso dei web font.
Includere i web font
I web font di Google possono essere inclusi in una pagina tramite l'elemento link:
<head>
<link href='http://fonts.googleapis.com/css?family=Six+Caps&v1' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Limelight&v1' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold,bolditalic&v1' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Lobster&v1' rel='stylesheet' type='text/css' />
</head>
Nel nostro esempio useremo i web font Six Caps, Limelight, Droid Serif e Lobster. Soffermiamoci sulla struttura degli URL dei web font:
- URL di base:
http://fonts.googleapis.com/css? - Identificatore della famiglia di font:
family=famiglia
L'identificatore può a sua volta essere composto dalle varianti del font (regular, italic, bold ecc.) introdotte dal carattere : e separate da una virgola. Prima di utilizzare questi web font, si raccomanda di verificare che abbiano le varianti richieste. In caso contrario, le proprietà CSS font-weight e font-style potrebbero non funzionare.
I web font possono essere inclusi anche tramite la regola @import posta all'inizio del foglio di stile:
@import url('http://fonts.googleapis.com/css?family=Six+Caps&v1');
Tuttavia tale regola ha un certo impatto sulla performance, quindi si raccomanda prudenza nel suo utilizzo.
Usare i web font
I web font si usano come un qualsiasi altro tipo di font gestibile con i CSS:
h2.six-caps {
font: 5em 'Six Caps', sans-serif;
margin: 0;
color: #323232;
text-transform: capitalize;
letter-spacing: 0.1em;
}
h2.limelight {
font: 2.5em 'Limelight', sans-serif;
margin: 0;
color: #d40;
}
h2.droid-serif {
font: italic 3em 'Droid Serif', serif;
color: #666;
margin: 0;
}
h2.lobster {
font: 3em 'Lobster', cursive;
color: #004bb2;
margin: 0;
}
Come si può notare, le famiglie generiche andrebbero sempre specificate per fornire agli utenti un valore di ripiego qualora il web font non fosse disponibile. Questo valore di ripiego ci permette di evitare l'effetto dello spazio bianco durante il caricamento del web font.
Potete visionare l'esempio finale in questa pagina.