Text replacement su wordpress: Cufon

Text replacement su wordpress: Cufon

3597
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.

  • Patrik P.

    Grazie anche per aver spiegato nozioni teoriche…..spesso si fanno delle cose senza nemmeno spiegarsi il perchè!

  • webInside

    Cufon, una salvezza!

  • Paki Romita

    Io ho utilizzato wpsifr ma questo è nettamente migliore. Grazie! 😉

  • weight loss

    grazie

  • gweb

    Io utilizzo sifr e devo dire che mi trovo molto bene.

  • Link!

    Ciao un’informazione!!! se utilizzo cufon non riesco a fare funzionare l’effetto hover sui link. Sai darmi maggiori informazioni?

  • admin

    Nella funzione “Cufon.set” che imposti da pannello di controllo dovresti aggiungere questo parametro alla regola dove vuoi far comparire l’effetto hover sul link ottenendo una cosa simile a questa: cufon.set(‘fontFamily’, ‘Helvetica Neue’).replace(‘h2’, { hover:true });

  • Paul Morales

    non funge

  • Ciao, lo sto testando sul titolo del sito ed il suo motto…
    Come posso aumentare la dimensione del titolo? Ho semplicemente scritto:

    Cufon.set(‘fontFamily’, ‘Lobster’).replace(‘#logo’);

    e mi ha sostituito il titolo… che è rimasto un po’ piccolino, mentre il motto suppongo devo andarmi a trovare nel file css come è stato nomitato giusto?

  • admin

    da CSS, basta assegnare una classe con dei parametri. Nel tuo caso #logo{ font-size:18px; } ad esempio.

  • ….giusto….
    Sai per caso, usualmente, con quale nome viene definito il motto nel foglio di stile?

  • admin

    su WordPress 3 dovrebbe essere id=”site-description”

  • Gentilissimo, grazie!

  • Att. Ferrante

    hai provato google fonts?

  • palooza

    Ciao! grandissimo sto cufòn!
    ma nn capisco una cosa.
    ho trovato un theme che già li usa (font: league gothic).
    Adesso vorrei inserire un nuovo font (andale mono), non sostituire quello che già lavora con cufon, ma un altro…e da usare solo sul menù (i titoli delle pages).

    Ho già convertito il mio font andale mono e messo il font nella cartella ” js/ ” dove c’è l’altro (league gothic)…in un “script.php” ho trovato:

    ———————

    <script src="/js/cufon-yui.js" type="text/javascript">
    <script src="/js/League_Gothic_400.font.js" type="text/javascript">
    <script src="/js/superfish.js" type="text/javascript">
    <script src="/js/custom.js" type="text/javascript">

    ———————
    qui aggiungo
    ———————

    <script src="/js/Andale-Mono_400.font.js” type=”text/javascript”>

    ———————
    poi?
    Nn capisco dove altro devo agire

    Adesso – IN LOCALE – il mio Andale Mono lo uso in “Style.css” con:
    ———————

    ul#top-menu li { margin-left: 4px; }
    ul#top-menu a { font-size: 14px; color: #000000; text-decoration: none; text-shadow: none; text-transform: uppercase; line-height: 67px; display: block; padding: 15px 10px; font-family:Andale Mono, Arial,Verdana;}
    ul#top-menu a:hover { color: #ffffff;}
    ul#top-menu > li.current_page_item > a, ul#top-menu > li.current-menu-item > a { color: #ffffff !important; font-style: italic; background: url(images/current-bg.png) repeat-x 0px 3px; height: 65px; }

    ———————

    come procedo per usarlo come Cufon e vederlo ovunque e non solo in locale??

    • Mario Concina

      stai utilizando wordpress?

  • palooza

    Si, WordPress con un theme che ha già come vedi predisposto l’uso di Cufon.

  • palooza

    il codice preciso (mi correggo) che c’è in Script.php è:

    <script src="/js/cufon-yui.js" type="text/javascript">
    <script src="/js/League_Gothic_400.font.js" type="text/javascript">
    <script src="/js/superfish.js" type="text/javascript">
    <script src="/js/custom.js" type="text/javascript">
  • palooza

    mmmm come mai non vedo tra i vari
    <script src=" – /js

    questo pezzo del codice?

    <?php bloginfo('template_directory'); ?

  • Mario Concina

    Sei sicuro di stare utilizzando cufon? Ti do un consiglio: rileggiti la guida passo passo riesegui l’installazione.

    • palooza

      Si sono sicuro, è nelle info del theme che sto modificando.
      La cosa che non riesco a fare è di per se banale ma forse non riesco a farmi capire.

      con Cufon gestisce il font League Gothic che fa determinate cose come h1 ad esempio
      il menu ivece era gestito da un Georgia messo normalmente.
      Io voglio che le voci del menu siano in Andale Mono e ho fatto (ma serve solo per in locale)
      [code] font-family:Andale Mono, Arial,Verdana;} [/code] nel foglio di stile.

      Come faccio ad usare Andale Mono solo sul menu in modo che funzioni/si visualizzi su tutti i pc?
      Posso sfruttare l’impostazione cufon che è già presente sul theme? Cufon si può applicare su due font? Ho visto in giro e sulle info del sito uff di cufon di si ma non sono così esperto da riuscirci. per questo chiedo aiuto!
      Grazie ancora Mario.

    • Mario Concina

      Hai installato il plugin wp-cufon? Hai generato il font js dal sito di cufon? L’hai inseirto nella cartella font?

      palooza, se leggi la guida c’è scritto tutto. E’ impossibile perdersi 😉

    • palooza

      Sì, ho fatto i 3 passaggi che dici seguendo la guida etc… ma nulla!
      Domanda preventiva: Ma se il theme già utilizza cufon (senza plugin) non è sufficiente agire sul codice? O forse le due cose vanno in conflitto?

    • Ciao Palooza,
      se dici che il tema utilizza Cufon senza plugin basterebbe chiamarlo nell’header del tuo sito, immagino una cosa del genere:

       
          Cufon.set('fontFamily', 'Andale Mono').replace('h2');

      Se non funge prova ad aprire il file javascript generato da cufon e vedi in quale modo è memorizzato il nome del font, a potrebbe essere Andale-Mono o AndaleMono e quindi per questo motivo non riesci a visualizzarlo.

      Ciao!

  • palooza

    Grazie Fabiana,
    con il codice che proponi non funge.
    Infatti io devo far condividere 2 font che si visualizzano con il metodo cufon sul sito.
    Il primo fa il suo dovere su h1-h2 etc etc mentre SOLO PER IL MENU vorrei usare un NUOVO font che HO MESSO IO nel ftp seguendo il manuale e le guide cufon.

    MI MANCA:
    il codice che dice al menu “prendi andale mono” come tuo font.

    ps. IL MENU per me è quello che elenca le PAGES nella mia barra della HOME
    vorrei che SOLO queste siano (o meglio ancora SOLO CIO’ CHE VIENE VISUALIZZATO nel menu sia Andale Mono…non tutto ciò che farò in h1 h2 etc.

    Spero possiate aiutarmi sono fermo!!! mi sono bloccato su questa cosa….grazie!
    un saluto

    • Ma il codice che ti serve te l’ho appena scritto!

       
      Cufon.set('fontFamily', 'Andale Mono').replace('h2');
  • palooza

    mmm
    Tu dici di mettere quel codice in “Style.css”?
    anche se le impostazioni dell’ altro font che usa cufon sono in “Script.php”.
    domanda: il tuo codice non modifica le cose che sono nel formato h2?
    Il menu, che vorrei andasse in andale mono, come vedi sopra ha altre impostazioni.
    Come mi consigli di procedere?

    • Assolutamente non in style.css, devi metterlo nell’header tra i tag “script” , è un js. L’ho scritto sopra: devi metterlo nell’header del tuo sito.

  • antolungo

    Mariolino…. ottima guida!

  • Pingback: Wordpress, Fonts, Cufon « netBios – Creazione Siti Web, Blog, E-commerce. base Wordpress e Joomla()

  • a me non va?:( ho seguito passo a passo il tutorial ma niente