Guida rapida ai caratteri web tramite @font-face

Paul Irish

Introduzione

La funzionalità @font-face di CSS3 ci consente di utilizzare caratteri personalizzati sul web in modo accessibile, manipolabile e scalabile. Potresti chiederti: "Perché dovremmo utilizzare @font-face se abbiamo Cufon, sIFR e utilizziamo il testo nelle immagini?" Ecco alcuni vantaggi dell'utilizzo di @font-face per i caratteri personalizzati:

• Ricercabilità completa tramite Trova (ctrl-F)
• Accessibilità a tecnologie per la disabilità come gli screen reader
• Il testo è traducibile tramite servizi di traduzione o traduzione in-browser
• CSS ha la piena capacità di modificare la visualizzazione tipografica: line-height, letter-spacing, text-shadow, text-align e selettori come ::first-letter e ::first-line

@font-face nella sua essenza

Nella sua forma più semplice, dichiariamo un nuovo carattere remoto personalizzato da utilizzare nel seguente modo:

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.ttf');
}

Poi utilizzala:

h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

In questa dichiarazione @font-face utilizziamo la proprietà font-family per assegnare un nome esplicito al carattere. Può essere qualsiasi cosa, indipendentemente dal nome effettivo del carattere; font-family: 'SuperDuperComicSans'; andrebbe benissimo, anche se forse non per la tua reputazione. Nella proprietà src indichiamo dove il browser può trovare l'asset font. A seconda del browser, alcuni tipi di caratteri validi sono eot, ttf, otf, svg o un URI dati che incorpora in linea tutti i dati dei caratteri.

Naturalmente, niente è mai così semplice come dovrebbe essere. La limitazione iniziale del codice riportato sopra era che non inviava un EOT a IE 6-8. La sintassi @font-face a prova di errori ha proposto un modo per risolvere il problema; di seguito è riportata una versione solida.

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.eot'); /* IE 5-8 */ 
  src: local('☺'),             /* sneakily trick IE */
        url('tagesschrift.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
        url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
        url('tagesschrift.svg#font') format('svg'); /* iOS */
}

Hai già mal di testa? Se preferisci iniziare subito, vai al generatore Font Squirrel, uno strumento che semplifica l'intera procedura, acquisendo il carattere e preparandone le varianti e il CSS. È indispensabile per mettere in pratica i web font oggi.

Assistenza da dispositivo mobile?

Safari mobile supporta i web font SVG a partire da iOS 3.1 e Android supporta i formati otf/ttf a partire dalla versione 2.2. Ma gli utenti che utilizzano dispositivi mobili dovrebbero usufruire di questa esperienza tipografica migliorata? Ti sconsiglio di farlo. Il motivo principale è dovuto al modo in cui WebKit gestisce il testo in attesa di un carattere personalizzato tramite @font-face: il testo è invisibile. Pertanto, su una connessione mobile a bassa larghezza di banda, gli utenti non vedranno alcun testo finché non saranno stati caricati circa 50.000 dati dei caratteri. Il team di Webkit sta cercando di attivare un carattere di riserva dopo alcuni secondi, ma fino a quando non sarà implementata, non ritengo sia giusto sottoporre gli utenti a questi ostacoli tra loro e i tuoi contenuti.

Servizi webfont

Diversi servizi inseriscono la funzionalità @font-face in un'API semplice, il che spesso ti consente di aggiungere una singola riga CSS o di script al codice HTML e di eseguire alcune configurazioni. Molti, come WebInk, Typekit e Fontslive, ti consentono di utilizzare i caratteri (a volte fino a un limite di larghezza di banda) a un costo mensile. L'utilizzo di questi servizi è molto pratico per gli sviluppatori occasionali, in quanto evita alcune delle complicazioni della pubblicazione di una soluzione cross-browser.

L'API Google Fonts ti consente di utilizzare un piccolo insieme selezionato di caratteri con licenza libera semplicemente collegandoti a un foglio di stile e lasciando che sia Google a gestire i problemi di compatibilità tra browser e di prestazioni. È il modo più rapido per iniziare a utilizzare i web font.

Trovare caratteri tipografici professionali per @font-face

Una sorpresa comune per i designer è che l'acquisto di una licenza per un carattere (da utilizzare, ad esempio, nella progettazione grafica) non significa che puoi utilizzarlo in @font-face. Le licenze per @font-face (o l'embedding web) vengono in genere vendute separatamente. Leggi attentamente il contratto e non esitare a contattare la fonderia di caratteri in caso di domande. Fontspring è una boutique di caratteri che vende centinaia di caratteri professionali di alta qualità, tutti autorizzati per l'utilizzo con @font-face. FontFont e altre fonderie hanno iniziato a vendere direttamente licenze @font-face, anche se al momento hanno come target solo WOFF ed EOT, il che esclude una parte considerevole (ma in calo) del mercato dei browser. Molte fonderie aggiungono licenze per webfont al proprio catalogo, ma se non riesci a trovarne una per il carattere scelto, contattale per chiedere informazioni.

Gestione degli errori FOUT

Il lampo di testo non formattato è un fenomeno di Firefox e Opera che pochi web designer apprezzano. Quando applichi un carattere tipografico personalizzato tramite @font-face, durante il caricamento della pagina si verifica un breve momento in cui il carattere non è ancora stato scaricato e applicato e viene utilizzato il carattere successivo nella pila font-family. Prima dell'upgrade, viene visualizzato un carattere diverso (in genere meno gradevole).

L'API Google Fonts è accompagnata da WebFont Loader, una libreria JavaScript che mira a fornire una serie di hook per eventi che ti offrono un grande controllo sul caricamento. Vediamo come puoi fare in modo che altri browser imitino il comportamento di WebKit di nascondere il testo di riserva durante il caricamento del carattere @font-face.

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
  custom: {
    families: ['Tagesschrift'],
    urls: ['http://paulirish.com/tagesschrift.css']
  }
});
</script>

/* we want Tagesschrift to apply to all h2's */
.wf-loading h2 {
  visibility: hidden;
}
.wf-active h2, .wf-inactive h2 {
  visibility: visible;
  font-family: 'Tagesschrift', 'Georgia', serif;
}

Se JavaScript è disattivato, il testo rimarrà visibile per tutto il tempo e, in caso di errori del carattere, verrà utilizzato un carattere con grazie di base. Per il momento, considera questa una misura temporanea. La maggior parte degli esperti di webfont preferisce nascondere il testo di riserva per 2-5 secondi, per poi rivelarlo. I dispositivi mobili e a bassa larghezza di banda traggono grandi vantaggi da questo timeout. È comprensibile che Mozilla stia cercando di risolvere il problema a breve.

Una soluzione più leggera, ma meno efficace, è la proprietà font-size-adjust, attualmente supportata solo in Firefox. Ti offre la possibilità di normalizzare l'altezza x in un font-stack, riducendo la quantità di modifiche visibili nell'FOUT. Infatti, il generatore di caratteri Squirrel ha appena aggiunto una funzionalità che indica il rapporto altezza x dei caratteri caricati, in modo da poter impostare con precisione il valore font-size-adjust.

Riepilogo

I caratteri web offrono ai designer una notevole libertà e, con le funzionalità imminenti come le ligature e le alternative stilistiche facoltative, avranno molta più flessibilità. Per il momento, puoi implementare questa parte di CSS3 in tutta sicurezza, in quanto copre il 98% dei browser di cui è stato eseguito il deployment. Buon divertimento!