Come inserire font personalizzato in un blog wordpress
Per rendere particolare il tuo blog, puoi pensare di puntare anche sulla personalizzazione del font da utilizzare, evitando di usare i classici. Ma per far ciò, non basta modificare solo il tipo di font nel file style.css (modificare il font-family), bensì devi caricare il font sul tuo spazio web.
Ecco come fare:
- Cerca e scarica sul tuo pc il font che desideri utilizzare, ad esempio consiglio dafont.com
- Per rendere questo font compatibile con il formato web, vai su fontsquirrel, clicca sul pulsante Add Fonts, seleziona Optimal e flagga la casella Agreement. Ora comparirà il pulsante per scaricare il kit del font, cliccaci su e scarica.
- Estrai i file e rinomina, con il nome del font, la cartella che è stata generata. Nel mio esempio la cartella si chiamerà bellerose-light.
- Crea la cartella fonts nella cartella del tema, otterrai una cosa del genere: www.nome-sito.it/wp-content/themes/nome-tema/fonts/
- Carica via ftp l’intera cartella del punto 3 nella cartella fonts appena creata.
- Apri il file functions.php (Aspetto > Editor > functions.php) ed incolla alla fine del file il seguente codice:
add_action('wp_print_styles', 'add_custom_font');
function add_custom_font() {
$url = 'http://www.nome-sito/wp-content/themes/nome-tema/fonts/bellerose-light/stylesheet.css';
wp_register_style('BelleroseLight', $url);
wp_enqueue_style('BelleroseLight');
}
dove bellerose-light è la cartella creata al punto 3, mentre BelleroseLight è il nome del font (che puoi leggere aprendo il file stylesheet.css nella cartella bellerose-light, solitamente è uguale al nome del font). Fai attenzione che è Case Sensitive, ovvero c’è differenza tra maiuscole e minuscole. Inserisci correttamente l’url!
Ora vai nel file style.css del tuo blog (Aspetto > Editor > style.css ) e specifica a quale testo applicare il nuovo font. Ad esempio, se vuoi modificare il font del titolo, in file style.css cerca entry-title, poi inserisci (o modifica se già esiste) il tipo di font da utilizzare tramite font-family: font-da-utilizzare; . Nel mio esempio il font è BelleroseLight, quindi diventa .entry-title { font-family: BelleroseLight; } .
VUOI CREARE IL TUO SITO O BLOG WORDPRESS?
Articoli Recenti
26/10/2011 alle 00:30
Sei fantastico!
Mai trovato un tutorial fatto così bene, specifico, chiaro, con link già pronti. Complimenti! Sono riuscita a caricare il font… ora non trovo la corrispondenza su css dove lo vorrei mettere io, ma questa è un’altra storia! ;))
Bravo e buon lavoro!
26/10/2011 alle 13:55
Grazie mille! 🙂
30/11/2011 alle 10:41
Ho seguito alla perfezione ogni passaggio ma non funziona… Il carattere è RUFA…preso da Dafont.com e quando lo converto nel file stylesheet.css lo rinomina RufaRegular
Hai idea del perchè non funzioni?
02/12/2011 alle 02:53
Leggi il nome del carattere aprendo il file stylesheet.css … Potrebbe essere RufaRegular, quindi utilizza quello che trovi come nome del carattere. Controlla bene anche il nome della cartella.
05/05/2012 alle 16:20
e l’url? A cosa si riferisce di preciso?
07/05/2012 alle 12:03
L’URL è l’indirizzo dove hai caricato la cartella del font, quindi prima carichi il font tutta la cartella del font e poi ti segni e usi quell’url.
16/05/2012 alle 16:21
Ciao io ho un problema, solo ti chiedo di considerare che sono autodidatta in queste cose quindi sicuramente avrò problemi di comprensione 🙂
Ho usato il programma di windows “editor di caratteri” per creare un carattere nuovo personalizzato usando come base “arial black” poi lo ho salvato in “tutti i caratteri” ….. lo ho copiato su di un file di word e fin qui tutto ok. Io lo vedo anche se non so ancora come usarlo usando la tastiera.
Come immaginavo se il documento di word o altro tipo se copio la scritta su facebook o altro …. chi legge vede un quadratino al posto del mio carattere :
ESISTE UN MODO PER RENDERE PUBBLICO IL MIO CARATTERE ???
Ti ringrazio anticipatamente
Marco
17/05/2012 alle 08:54
No, il tuo carattere non verrà riconosciuto da nessun browser, questi contengono solo dei caratteri standard, mi dispiace.
Ciao
Roberto
17/05/2012 alle 23:25
Un vero peccato….ti ringrazio del chiarimento.
05/08/2012 alle 13:24
a me non funziona. correggimi se ho sbagliato qualcosa
1- innanzitutto quando aggiungo il codice in functions.php mi appare tutta la striscia
add_action(‘wp_print_styles’, ‘add_custom_font’); function add_custom_font() { $url = ‘http://www.psicologaonlinesalerno.it/wordpress/wp-content/themes/coffeedesk/fonts/coneria-script/stylesheet.css’; wp_register_style(‘ConeriaScriptDemoRegular’, $url); wp_enqueue_style(‘ConeriaScriptDemoRegular’); }
in alto nel backend di wordpress, in ogni pagina in cui mi muovo.
2- ho seguito alla lettera e chiamato la cartella coneria-script, e il nome del carattere che vedo in stylesheet è ConeriaScriptDemoRegular, giusto? di seguito il stylesheet:
@font-face {
font-family: ‘ConeriaScriptDemoRegular’;
src: url(‘demo_coneriascript-webfont.eot’);
src: url(‘demo_coneriascript-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘demo_coneriascript-webfont.woff’) format(‘woff’),
url(‘demo_coneriascript-webfont.ttf’) format(‘truetype’),
url(‘demo_coneriascript-webfont.svg#ConeriaScriptDemoRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
3- ho messo in font family sidebar 1
/* [ Sidebar 1] */
#sidebar1 {color:#000000; font-size:13px;font-family:”ConeriaScriptDemoRegular”}
ma non va, mi puoi dare un’indicazione? ti ringrazio
07/08/2012 alle 20:06
Probabilmente hai sbagliato ad inserire il codice, magari le virgolette oppure lo hai inserito in un punto non esatto, fai delle prove
17/08/2012 alle 22:46
Innanzitutto complimenti per il tutorial davvero semplice nell’esposizione. Io vorrei cambiare il font solo di alcune pagine del Blog inserito nel commento, E possibile con il tuo metodo, oppure se c’è un metodo non complesso…. perché sono alle prime armi con i Blog.
Ti ringrazio!
24/08/2012 alle 17:57
Ci sono anche altrim plugin che lo fanno, ma io preferisco questo perchè è molto più leggero (in termini ti kB)… è molto semplice da effettuare…
28/12/2012 alle 23:30
Ciao. cerco di fare come dici, ma mi rimanda ad un warning appena cerco di aggiungere la stringa…
29/12/2012 alle 17:06
Mi puoi riportare esattamente cosa ti dice e dove?
Grazie
09/02/2013 alle 10:43
Ciao Grazie Per la guida! vorrei cambiare il font della barra dei menù del mio sito. ma non trovo il codice di riferimento a questa.
11/02/2013 alle 15:36
Leggi Come e dove modificare WordPress
18/02/2013 alle 14:38
Ciao Roberto,
caricando il font su http://www.fontsquirrel.com/fontface/generator mi appare un pop up che dice
“Microsoft has requested that their font Segoe Print Regular be blacklisted by the Generator. You will not be able to convert this font.”
Come posso risolvere il problema? Il cliente mi ha chiesto proprio questo font
Grazie
Elena
18/02/2013 alle 14:50
Ciao Elena,
ho avuto anche io questo problema e ho cambiato il font. Probabilmente è un font a pagamento, quindi ricerca il font e acquistalo. Al momento, è l’unica soluzione che ho trovato.
04/03/2013 alle 16:17
Buono.
Di solito usavo il plugin anyfont, ma snellire WP da plugins di cui se ne può fare anche a meno è sempre una buona opzione!
Per chi fosse interessato, per chi usa un child theme, per chi migra spesso da un tema all’altro, una variante estremamente più pulita potrebbe essere quella di non inserire l’url assoluto nel file functions.php (nell’esempio era $url = ‘http://www.nome-sito/wp-content/themes/nome-tema/fonts/bellerose-light/stylesheet.css’;), ma di utilizzare una versione più dinamica con una formula del tipo:
$url = get_stylesheet_directory_uri().’/fonts/bellerose-light/stylesheet.css’;
Ci sono diverse tecniche che WP mette a disposizione, ma questa è diciamo la consigliata e più adatta ai childthemes, nonché applicabile su qualunque tema si stia utilizzando 😉
enJoy!
05/03/2013 alle 14:14
Grazie mille Simone per il tuo contributo! Ottima soluzione!
29/03/2013 alle 17:48
Che font è questo?:D
02/04/2013 alle 16:50
league_gothicregular 🙂
07/04/2013 alle 18:34
Bell’articolo, in alternativa si può utilizzare anche il plugin WP Google Fonts che permette di utilizzare le font di google
25/04/2013 alle 13:27
vorrei aumentare le dimensione delle voci del menu, mi daresti una dritta?.Grazie
26/04/2013 alle 18:28
Leggi https://www.robertoiacono.it/come-dove-modificare-wordpress/ , poi usa font-size: 30px;
20/05/2013 alle 18:09
Come faccio a aggiungere più font perchè ho provato a copiare il codice uno sotto l’altro modificando le voci ma quando ricarico il sito la pagina resta bianca mentre con solo uno non ho problemi
21/05/2013 alle 08:47
Scusa la domanda stupida, ma non si sa mai: hai definito più variabile $url per i vari font? (ad es.
$url1 = ‘http://www.nome-sito/wp-content/themes/nome-tema/fonts/nomefont/stylesheet.css’;
$url2 = ‘http://www.nome-sito/wp-content/themes/nome-tema/fonts/altro_font/stylesheet.css’;
etc.)
23/05/2013 alle 14:33
Puoi fare in due modi, o usi una seconda variabile $url2, oppure riutilizzi ancora $url ma alla fine (dopo wp_enqueue_style(‘BelleroseLight’); )
23/05/2013 alle 14:34
Fai così, copia
$url = ‘http://www.nome-sito/wp-content/themes/nome-tema/fonts/bellerose-light/stylesheet.css’;
wp_register_style(‘BelleroseLight’, $url);
wp_enqueue_style(‘BelleroseLight’);
subito sotto a
$url = ‘http://www.nome-sito/wp-content/themes/nome-tema/fonts/bellerose-light/stylesheet.css’;
wp_register_style(‘BelleroseLight’, $url);
wp_enqueue_style(‘BelleroseLight’);
e poi cambi il nome del secondo font
27/05/2013 alle 16:36
Ciao Roberto,
nella gestione di un sito su wordpress mi sono ritrovato come molti a dover cambiare il font preimpostato.
Purtroppo però l’autore del tema l’aveva personalizzato in modo tale da far scegliere all’utente tra 2 font, andando a modificare la struttura dei functions e style in maniera (per me che sono neofita) incomprensibile.
Ho pensato allora di “forzare” il font brutalmente.
Anche se non è una soluzione professionale ed elegante, spero possa servire a qualcuno!
Ho descritto brevemente il procedimento qui
www.simonepetrucci.com/cambiare-il-font-di-un-tema-wordpress/
Grazie delle tue preziosissime guide 🙂
31/05/2013 alle 14:22
Grazie a te Simone 🙂