Custom font e WebFont Loader

La prima cosa che dobbiamo fare è cercare un font che assomigli a quello utilizzato nella locandina, fortunatamente Google ne mette a disposizione un copioso elenco attraverso il famoso servizio Google WebFont. Dopo una breve ricerca individuiamo Esteban come soluzione interessante e decidiamo di utilizzarlo nel nostro progetto.

Sfortunatamente il canvas non incorpora una logica per l'attesa del completo caricamento di un file di font, quindi se proviamo a scrivere del testo utilizzando 'Esteban' prima che questo sia caricato otteniamo un nulla di fatto (sul canvas non viene stampato nulla). Dobbiamo quindi implementare una soluzione che attivi l'algoritmo per il disegno della locandina soltanto al completo caricamento del file di font.

La soluzione ci viene offerta da una libreria di Google: WebFont Loader, che mette a disposizione un metodo con il quale possiamo essere notificati dell'avvenuto caricamento dei font richiesti.

Il meccanismo è il seguente, per prima cosa deve essere preparato un oggetto 'WebFontConfig' come da esempio:

WebFontConfig = {
  google: {
    families: [ 'Esteban' ]
  },
  active: function() {
    // inserire qui il codice da eseguire al completo caricamento del font
  }
}

poi è necessario richiamare la libreria Javascript facendo attenzione che l'oggetto di cui sopra sia presente in modo che questa lo possa leggere ed interpretare. Nel nostro caso attrezziamo 'application.js' secondo lo schema appena presentato:

WebFontConfig = {
  google: {
    families: [ 'Esteban' ]
  },
  active: function() {
    $('canvas[data-stile=mummia]').each(
	  function(indice, elemento) {
        effettoLaMummia( elemento,
          $(elemento).attr('data-prima-parola') || 'THE' ,
          $(elemento).attr('data-seconda-parola') || 'MUMMY'
        );
      });
    function effettoLaMummia(canvas, prima_parola, seconda_parola) {
        alert("Pronti per scrivere: " + prima_parola + " e: " + seconda_parola);
    }
  }
}

e accodiamo alle richieste javascript di 'index.html' quella per la libreria 'WebFont Loader' in modo che al caricamento di questa l'oggetto WebFontConfig sia già disponibile.

<!-- JAVASCRIPT -->
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="js/application.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>

Nella funzione associata alla chiave 'active' abbiamo inserito una piccola porzione di codice che getta le basi la futura strutturazione del progetto. Per ogni canvas con attributo 'datastile', valorizzato con 'mummia', invochiamo una funzione 'effettoLaMummia', usando come argomenti il canvas stesso e le due parole da visualizzare.

Poco più in basso definiamo questa funzione e impostiamo un semplice alert che ci rassicuri sul buon funzionamento del sistema; eseguiamo il tutto in un browser per verificare l'avanzamento: