Text replacement su wordpress: Cufon

Text replacement su wordpress: Cufon

24705
33
CONDIVIDI

Se utilizzi wordpress e vuoi dare un tocco di personalizzazione ai soliti font di sistema rendendoli grafici cosi come accade utilizzando photoshop o qualsiasi altro programma di design, wp-cufon (estensione del gia nonno cufòn) e quello che fa per te.

Cos’è cufòn?

Cufòn rende possibile l’utilizzo di font grafici sul web senza ricorrere a barrette/immaginette del caso, il tutto a vantaggio della dinamicità. Fondamentalmente esistono 2 librerie che si occupano di ciò: l’altra è sIFR, un altro text-replacement per il quale ho dedicato anche un articolo qualche mese fa. Utilizzando entrambi ho notato che sicuramente cufòn ha qualcosa in più e vi spiegherò in breve perchè è al momento il miglior font-replacement in circolazione: a differenza di sIFR ed altri text-replacement, cufòn agisce quando l’intera pagina è stata caricata lasciando intatta la struttura HTML della senza intaccare e penalizzare minimamente l’indicizzazione sui motori di ricerca, sifr ad esempio nel sorgente della pagina stampa dei tag EMBED e questo è gia un punto a favore di cufòn. Il risultato a video, invece, altro non è che un’immagine, mentre con sIFR è un oggetto Flash. Altro punto a favore di cufòn.

Come funziona?

A molti interesserà arrivare al sodo però nell’informatica è sempre stimolante capire cosa c’è dietro, qual’è l’algoritmo che permette in questo caso di rendere un “flyer” il vostro sito web:

  1. Cufòn prende in pasto il font (ttf, otf);
  2. Lo analizza salvando il risultato di questa analisi in SVG, scalandolo in vettoriale;
  3. A sua volta l’SVG è convertito in tracciati VML (linguaggio XML aperto per la creazione di oggetti vettoriali);
  4. Il tutto rielaborato via Javascript con formato “json” (spesso utilizzato in AJAX) che permette l’interazione di dati in un’applicazione client-server;

Primi Passi

Per generare il Javascript che darà vita al vostro font grafico è sufficiente seguire pochi passi:
Collegatevi al seguente indirizzo web: http://cufon.shoqolate.com/generate/;

Caricare il font dal vostro pc prestando attenzione al tipo di carattere che volete associare (normale, grassetto, corsivo e grassetto-corsivo). I formati accettati sono sia i tipici TTF di windows che gli open type (OTF) piuttosto che i Printer Font Binary (PFB).

Come passo successivo dobbiamo comunicare a cufòn tutti i set di caratteri necessari da codificare, per comodità, di solito li includo tutti senza pensarci due volte (segue figura).

Accettare i termini e le condizioni e proseguire per ottenere il file Javascript.

Integrazione in wordpress

Come accennato ad inizio articolo, il plugin che merita una menzione si chiama “wp-cufon” (potete scaricarlo al seguente indirizzo http://wordpress.org/extend/plugins/wp-cufon/).

Installato il plugin all’altezza del menu “Aspetto” comparirà la voce “Cufòn”. La prima cosa che vi chiederà è quella di creare una cartella “fonts” all’interno della directory “wp-content/plugins/”. Fatelo inserendo i file javascipt (quelli ottenuti dal sito web di cufòn) dei caratteri che intendete convertire graficamente.

Adesso vi bastano poche nozioni CSS per proseguire. Sempre nel back-end abbiamo a disposizione di una text-area dove assegneremo le direttive di replacement per le classi CSS che intendiamo sostituire.

Esempio: Voglio sostituire TUTTI i tag H2 all’interno del mio sito con il font “Helvetica Neue” grande 25px di colore ROSSO. All’interno della text-area dovrò scrivere il seguente codice:

Cufon.set('fontFamily', 'Helvetica Neue').replace('h2');

questa direttiva non fa altro che dire “non appena incontri un tag H2 all’interno della pagina maschera il suo contenuto con il font Helvetica Neue.

h2{ color:#cc0000; font-size:25px; }

mentre da CSS personalizziamo le proprietà dell’elemento a nostro piacere (nel mio caso voglio un font grande 25px e ROSSO, ricordate?).

E’ anche possibile accodare più proprietà per il replacement senza stare a ripetere più volte la riga, ad esempio:

Cufon.set('fontFamily', 'Helvetica Neue').replace('h2')('#lista h1')('.pippo');

Analogamente questo script può essere utilizzato all’esterno di wordpress (cosi come è nato diverso tempo fa) includendo la libreria nelle intestazioni del codice HTML e successivamente interrogando le chiamate Cufon.set() cosi come ho precedentemente illustrato in wordpress.

Come al solito lascio aperti i commenti per eventuali chiarimenti.