Usare i webfont

Adesso che abbiamo selezionato un font, mettiamolo nel sito web. I webfont sono definiti in CSS con la regola @font-face. Se siete web developer, molto probabilmente avrete scritto, copiato e incollato, o almeno visto una regola @font-face. Tuttavia, per completezza, vediamone un esempio di base:

Questo crea una nuova famiglia di webfont a cui si può far riferimento con font-family o con la proprietà shorthand font. Ma qui manca qualcosa. Quando si fa riferimento a un webfont in un font stack, dovete sempre essere sicuri di includere almeno un fallback font nel caso che il webfont non venga caricato. Qui, se Elena non viene caricato, il browser ripiegherà sulla famiglia serif:

p {
    font-family: Elena, serif;
}

Parleremo ancora dei fallback font e di come possano essere usati per far sembrare che il vostro sito si carichi più velocemente nel Capitolo 3. Per ora, lasciamo che il nostro fallback stack sia semplice includendo solo famiglie di font serif e sans-serif.

Font Family#section1

Si crea una font family con più stili creando una regola @font-face per ogni stile e usando lo stesso nome di font-family. Le seguenti regole @font-face creano una famiglia con uno stile normal e uno bold:

@font-face {
    font-family: Elena;
    src: url(elena-regular.woff);
    font-weight: normal;
}

@font-face {
    font-family: Elena;
    src: url(elena-bold.woff);
    font-weight: bold;
}

Potete usare questa font family nel vostro CSS facendo riferimento al nome della famiglia e al font-weight nei vostri selettori. Questo applica lo stile regular ai paragrafi e quello bold ai paragrafi strong:

p {
    font-family: Elena, serif;
}

p strong {
    font-weight: bold;
}

Oltre a font-weight, @font-face accetta anche i descrittori di proprietà font-style e font-stretch, che definiscono gli stili quali italic e condensed. Tutti e tre i property descriptor possono essere usati per creare una singola font family con più stili. In teoria, questo ci permette di creare una famiglia contenente 243 stili individuali (nove valori di font-weight × tre valori di font-style × nove valori di font-stretch). In pratica, tuttavia, siamo limitati a ventisette valori, dal momento che alcuni browser non supportano font-stretch (Fig 2.1).

Con un po’ di fortuna, i restanti browser implementeranno presto la proprietà font-stretch e potrete usare tutte le 243 classificazioni del font.

Formati del font#section2

Il descrittore src dice al browser dove trovare il font file. Gli esempi precedenti usavano un solo formato di font, ma spesso vedrete URL a formati di font multipli combinati a suggerimenti di formato, che vengono appesi dopo l’URL usando la sintassi format("value"). I format hint dicono al browser qual è il formato del font file a un dato URL.

@font-face {
    font-family: Elena;
    src: url(elena-regular.woff2) format("woff2"),
        url(elena-regular.woff) format("woff");
}

Se elencate formati multipli, i browser moderni sceglieranno il primo formato che supportano basandosi sui format hint. Pertanto, è importante elencare i formati del webfont ordinati dalla miglior compressione alla peggiore. Anche se i format hint sono opzionali, includeteli sempre: permettono al browser di conoscere il formato senza dover scaricare il font. Per esempio, se un browser non supporta WOFF2, ma supporta WOFF, può saltare il font file WOFF2 basandosi sul format hint.

I browser supportano svariati formati di webfont: OpenType (TrueType), EOT, WOFF e WOFF2. Alcuni browser supportano anche i font SVG, ma sono deprecati e non dovrebbero più essere usati (e non dovrebbero essere confusi con il nuovo formato OpenType-SVG). EOT, WOFF e WOFF2 non sono tecnicamente formati di font. Sono files OpenType compressi con vari gradi di compressione. WOFF2 offre la miglior compressione, seguito da WOFF e EOT (Fig 2.2).

Nel cercare copertura per tutti i browser, potreste esservi imbattuti in qualcosa chiamato bulletproof @font-face syntax di Fontspring. La bulletproof syntax usa i font file EOT, WOFF2, WOFF, raw OpenType e SVG per coprire il maggior numero di browser:

@font-face {
    font-family: Elena;
    src: url(elena.eot?#iefix) format("embedded-opentype"),
         url(elena.woff2) format("woff2"),
         url(elena.woff) format("woff"),
         url(elena.otf) format("opentype"),
         url(elena.svg#elena) format("svg");
}

La prima riga dell’URL potrebbe sembrarvi un po’ strana. Le versioni di Internet Explorer 8 e precedenti non supportano la sintassi per formati di font multipli e trattano l’intero valore della proprietà src come URL. La bulletproof syntax inganna Internet Explorer 8 e precedenti facendogli credere che i restanti URL siano parte del fragment identifier del primo URL. Dal momento che i fragment identifier vengono ignorati quando si scaricano i files, Internet Explorer 8 e precedenti usano semplicemente il primo URL. I browser diversi da Internet Explorer salteranno tale riga perché non supportano EOT. Il resto delle entry sono quello che vi aspettate: formati di font elencati in ordine di preferenza.

Ma la bulletproof syntax è ancora rilevante? No. In effetti, penso che sia dannosa. I font SVG sono deprecati e supportati solo da browser che non sono più in uso. La maggior parte dei siti web supporta Internet Explorer 9 e successivi, ciononostante la sintassi elenca EOT come primo formato di font preferito. Anche se Internet Explorer 9 e successivi supportano WOFF, queste versioni scaricano ancora il file EOT, semplicemente perché è elencato per primo.

Dal momento che la maggior parte dei siti web non supporta più i vecchi browser, raccomando caldamente di usare una sintassi semplificata, che copre tutti i browser moderni, compresi quelli leggermente più vecchi che sono ancora in uso, come Android 4.4 e precedenti:

@font-face {
    font-family: Elena;
    src: url(elena.woff2) format("woff2"),
         url(elena.woff) format("woff"),
         url(elena.otf) format("opentype");
}

Sebbene siano ancora in uso delle versioni più vecchie di Android, l’uso mondiale di questi browser sta rapidamente diminuendo. Presto sarete probabilmente in grado di eliminare del tutto anche il formato raw OpenType e semplificare ulteriormente la sintassi:

@font-face {
    font-family: Elena;
    src: url(elena.woff2) format("woff2"),
         url(elena.woff) format("woff");
}

In questo caso, qualcuno che usa un browser più vecchio vedrà semplicemente i fallback font invece del webfont. Va bene: possono ancora leggere il contenuto con il fallback font. (Darò ulteriori dettagli sui fallback font più tardi).

C’è un altro possibile valore per il descrittore src. La funzione local prende il nome di una font family locale. Se per caso il font è installato sul sistema, il browser userà quello, evitando così un download extra.

@font-face {
    font-family: Elena;
    src: local("Elena"),
         url(elena-regular.woff2) format("woff2"),
         url(elena-regular.woff) format("woff");
}

Anche se questa può sembrare una grande ottimizzazione, niente garantisce che il font locale si abbini al vostro webfont. Potreste ottenere una versione diversa del font, un font con un supporto diverso per le lingue o un font completamente diverso. Per questo motivo, solitamente raccomando di non usare la funzione local a meno che non troviate accettabili questi svantaggi.

Volete saperne di più?#section3

Questo estratto da Webfont Handbook vi aiuta a cominciare. Ordinate l’intera versione oggi, insieme ad altri eccellenti titoli da A Book Apart.