Snellire il caricamento dei font con Google Web Fonts

Parlando di web fonts e performance CSS è emerso come sia da valutare attentamente la scelta fra uso della proprietà  @font-face e testo reso come immagine.

Chi utilizza Google Web Fonts, API per utilizzare una ricca collezione di font online, può da qualche tempo limitare il caricamento ed il rendering del font scelto selezionando solo i caratteri indispensabili.

Poniamo il caso di dover usare un particolare font solo per il titolo del nostro sito (Lorem Ipsum srl): ci basterà  indicare nella query string un attributo "text" e far scaricare solo le lettere (10 in tutto) necessarie. Il codice apparirà  simile a questo:

<link href="http://fonts.googleapis.com/css?family=Droid+Serif&text=LoremIpsumsrl" rel="stylesheet" type="text/css">

In questo modo le differenze di peso/velocità  fra i metodi (CSS3 vs immagini) si assottigliano, rendendo la scelta finale una questione personale. Entrambe le soluzioni possono garantire a modo loro semantica, accessibilità  e leggerezza. Le immagini ci costringeranno magari ad un lavoro supplementare di codice (image replacement) ma garantiscono attributi in più utili a fini SEO ed uniformità  totale di visualizzazione, @font-face ci permetterà  di seguire lo standard.