Wordpress cufon - font grafici sito web - come installare cuf??n su wordpress

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:

Cufòn prende in pasto il font (ttf, otf);
Lo analizza salvando il risultato di questa analisi in SVG, scalandolo in vettoriale;
A sua volta l’SVG è convertito in tracciati VML (linguaggio XML aperto per la creazione di oggetti vettoriali);
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.

33 comments

Patrik P.
18 Ottobre 2010 at 18:29

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

webInside
18 Ottobre 2010 at 18:35

Cufon, una salvezza!

Paki Romita
24 Ottobre 2010 at 18:38

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

weight loss
26 Ottobre 2010 at 1:25

grazie

gweb
29 Ottobre 2010 at 20:52

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

Link!
12 Novembre 2010 at 16:30

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

admin
13 Novembre 2010 at 8:41

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
13 Novembre 2010 at 23:36

non funge

Dario
21 Febbraio 2011 at 13:27

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
21 Febbraio 2011 at 13:30

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

Dario
21 Febbraio 2011 at 13:38

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

admin
21 Febbraio 2011 at 13:42

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

Dario
21 Febbraio 2011 at 13:51

Gentilissimo, grazie!

Att. Ferrante
9 Giugno 2011 at 21:52

hai provato google fonts?

palooza

21 Luglio 2011 at 16:15

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:

———————

---------------------
qui aggiungo
---------------------

palooza
21 Luglio 2011 at 19:09

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

questo pezzo del codice?

<?php bloginfo('template_directory'); ?

Mario Concina
21 Luglio 2011 at 19:54

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

- palooza
  21 Luglio 2011 at 20:05
  
  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
  21 Luglio 2011 at 22:40
  
  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
  21 Luglio 2011 at 22:57
  
  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?
  
- Fabiana Testini
  21 Luglio 2011 at 23:09
  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
22 Luglio 2011 at 13:37

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

- Fabiana Testini
  22 Luglio 2011 at 14:21
  Ma il codice che ti serve te l’ho appena scritto!
  
  Cufon.set('fontFamily', 'Andale Mono').replace('h2');
  
palooza
22 Luglio 2011 at 14:28

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?

- Fabiana Testini
  22 Luglio 2011 at 15:11
  
  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
27 Marzo 2012 at 18:09

Mariolino…. ottima guida!

- Mario Concina
  7 Aprile 2012 at 12:22
  
  All’epoca sicuramente. Adesso consiglio l’utilizzo di Font-Face:
  http://www.marioconcina.it/blog/web-design/css3-utilizzare-bene-font-face.html
  
  Buona lettura!
  
Pingback: Wordpress, Fonts, Cufon « netBios – Creazione Siti Web, Blog, E-commerce. base Wordpress e Joomla
matteo
18 Luglio 2012 at 20:31

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

- Mario Concina
  18 Luglio 2012 at 21:26
  
  Questo articolo è stato scritto diversi mesi fa, sicuramente oggi una tecnologia migliore in essere è quella di utilizzare la proprietà font-face direttamente da css.
  
  Questo articolo forse è più interessante http://www.marioconcina.it/blog/web-design/css3-utilizzare-bene-font-face.html

Cos’è cufòn?

Come funziona?

Primi Passi

Integrazione in wordpress

33 comments

Patrik P.

webInside

Paki Romita

weight loss

gweb

Link!

admin

Paul Morales

admin

admin

Att. Ferrante

palooza

palooza

Mario Concina

palooza

Mario Concina

palooza

palooza

palooza

antolungo

Mario Concina

Mario Concina

Lascia un commento Cancel Reply