@font-face in Ubuntu block notes

Da un po’ di tempo a questa parte dovreste vedere questo blog con i font di una famiglia precisa: il Droid. Gran bel font, senza dubbio, che uso anche come carattere standard nella mia linux-box. Dopo averlo provato sul blog senza includerlo negli stili del CSS, ho deciso di renderlo operativo per chiunque usi un browser moderno che legga correttamente la dichiarazione @font-face. In questo articolo condivido alcuni punti fondamentali per l’implementazione.

Typekit o DIY?

Per chi vuole evitare di imparare a incorporare un font nel proprio foglio stile, può utilizzare il servizio di Typekit, semplice e veloce, che propone un account gratuito per iniziare: un set di font prestabiliti tra i quali scegliere quelli da usare, fino a un massimo di due font.

Per chi desidera avere più font senza limiti può pagare per un servizio più esteso oppure può imparare a gestire i font liberamente e senza alcun tipo di limite. Tra l’altro non ci sono difficoltà particolari da superare per utilizzare qualsiasi font senza vincoli nel proprio blog.

La sintassi

La sintassi è la seguente:

@font-face {
	font-family: <Nome del font usato nel CSS>;
	src: <nome del font installato nel PC del visitatore e/o percorso del file del font>;
	[font-weight: <bold>];
	[font-style: <italic>];
}

Vediamo in dettaglio.

font-family: è il nome del font che verrà usato lungo tutto il CSS. Non deve necessariamente essere il vero nome del font, ma anche un nome di fantasia; l’importante è che venga utilizzato sempre nella stessa forma tra la dichiarazione @font-face e gli stili del foglio. È importante inoltre che venga mantenuto identico tra le altre dichiarazione @font-face relative agli stili del font (grassetto, corsivo, ecc.).

src: qui si indica il percorso del file del font da dove il browser del visitatore può prelevarlo per renderizzare la pagina. Prima però di farglielo prelevare, è bene indicare al browser di guardare se tra i font già installati nel sistema esiste questo font: per questo motivo si usa local per indicare il nome o i nomi con cui potrebbe essere individuato. Se il font è installato, verrà usato quello già presente nel sistema, altrimenti si procederà al download del font.

font-weight: si indica se questo font è da utilizzare come grassetto quando negli stili del CSS viene dichiarato font-weight: bold;.

font-style: in questo caso lo si usa quando è da utilizzare come corsivo. Ovviamente per il grassetto corsivo vanno specificati entrambi gli stili.

Esempio pratico

Facciamo un esempio col font Droid, utilizzato in questo template. Di questa famiglia di font esistono le varianti Serif, Sans serif e Monospace. Vediamo la Sans serif, che ha solo due stili: il regolare e il grassetto.

/* Droid Sans Regular */
@font-face {
	font-family: 'Droid Sans';
	src: url('fonts/DroidSans.eot');
	src: local('Droid Sans Regular'),
		 local('Droid Sans'),
		 local('DroidSans'),
		 url('fonts/DroidSans.ttf') format('truetype');
}

Il valore per font-family è quello che ho scelto di usare lungo tutto il CSS. Seguono due linee diverse per l’origine del font, cioè due src distinti: il primo è specifico per Internet Explorer, il secondo è valido per i browser Firefox, Chrome, Safari e Opera. I due src vengono utilizzati in questo modo: Explorer legge il primo e lì si ferma perché non sa cosa vogliano dire local e format presenti nelle righe successive; gli altri non riconoscono il formato .eot e leggono il successivo src. Nei tre local vengono specificati i nomi possibili con cui il browser può trovarli nel sistema: ad esempio, nei Mac il browser lo troverà col nome PostScript ('DroidSans') e non con gli altri. Se il browser non trova il font nel sistema, procederà al download dalla directory specificata. Il parametro format specifica il tipo di font, in questo caso un TrueType; se si fosse trattato di un OpenType, di un WOFF o di un SVG, avremmo avuto rispettivamente:

url('fonts/DroidSans.otf') format('opentype'),
url('fonts/DroidSans.woff') format('woff'),
url('fonts/DroidSans.svg@droidsans') format('svg');

Supporto dei browser

Nell’attesa che i WOFF diventino probabilmente lo standard per i caratteri sul web, al momento in cui scrivo Firefox, Chrome, Safari e Opera (ultime versioni) supportano tranquillamente i TrueType. Per approfondire l’argomento seguite i link riportati in fondo all’articolo.

Stili dei font presenti in questo blog

Per avere una panoramica di come questa tecnica è implementata in questo blog, eccovi tutte le dichiarazioni usate:

@font-face {
	font-family: 'Droid Sans Mono';
	src: url('fonts/DroidSansMono.eot');
	src: local('Droid Sans Mono Regular'),
		 local('Droid Sans Mono'),
		 local('DroidSansMono'),
		 url('fonts/DroidSansMono.ttf') format('truetype');
}

@font-face {
	font-family: 'Droid Sans';
	src: url('fonts/DroidSans.eot');
	src: local('Droid Sans Regular'),
		 local('Droid Sans'),
		 local('DroidSans'),
		 url('fonts/DroidSans.ttf') format('truetype');
}

@font-face {
	font-family: 'Droid Sans';
	src: url('fonts/DroidSans-Bold.eot');
	src: local('Droid Sans Bold'),
		 local('DroidSans-Bold'),
		 url('fonts/DroidSans-Bold.ttf') format('truetype');
	font-weight: bold;
}

@font-face {
	font-family: 'Droid Serif';
	src: url('fonts/DroidSerif-Regular.eot');
	src: local('Droid Serif Regular'),
		 local('Droid Serif'),
		 local('DroidSerif'),
		 url('fonts/DroidSerif-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Droid Serif';
	src: url('fonts/DroidSerif-Italic.eot');
	src: local('Droid Serif Italic'),
		 local('DroidSerif-Italic'),
		 url('fonts/DroidSerif-Italic.ttf') format('truetype');
	font-style: italic;
}

@font-face {
	font-family: 'Droid Serif';
	src: url('fonts/DroidSerif-Bold.eot');
	src: local('Droid Serif Bold'),
		 local('DroidSerif-Bold'),
		 url('fonts/DroidSerif-Bold.ttf') format('truetype');
	font-weight: bold;
}

@font-face {
	font-family: 'Droid Serif';
	src: url('fonts/DroidSerif-BoldItalic.eot');
	src: local('Droid Serif Bold Italic'),
		 local('DroidSerif-BoldItalic'),
		 url('fonts/DroidSerif-BoldItalic.ttf') format('truetype');
	font-style: italic;
	font-weight: bold;
}

Repository di font liberi o gratuiti

Dove trovare i font? Ovviamente potete usare tutti i font presenti nella vostra magnifica distribuzione Linux, tutti liberi da vincoli nell’utilizzo che preferite, oppure provate questi link: