Ho realizzato un piccolo programmino che permette di creare al volo il codice con il vostro font a questo indirizzo : Crea il font in pochi secondi !. 😉
In questo articolo vi spiegherò come inserire dei font personalizzati sul vostro sito WordPress, per renderlo più accattivante, senza dover per forza utilizzare sempre quelli di default.
La procedura è relativamente semplice; dovete solo seguire questi passaggi fondamentali.
Scaricare il Font su FontSquirrel
Per scaricare il vostro nuovo font è necessario recarsi sul sito di fontsquirrel.
Ora basta che vi scegliete il font che più vi piace e scaricare il pacchetto in formato .zip.
Una volta scaricato basta che vi recate sulla voce sul menu WEBFONT GENERATOR;
Avrete una schermata di questo tipo :
Ora basta che aggiungete il vostro file cliccando sulla voce add font. all’interno dell’archivio potreste avere i file con 2 estensioni diverse (.ttf o .otf); basta inserire una delle 2.
Poi lasciate come impostazione optimal, spuntate la casellina sottostante e convertite il vostro font cliccando su Download your kit.
Una volta convertito, allinterno del nuovo file “zippato”, sono contenuti i file necessari a installarlo sul vostro sito.
Ora dovete recarvi allinterno del vostro tema tramite ftp per poter inserire il vostro nuovo font.
Il percorso corretto è /wp-content/themes/IL-VOSTRO-TEMA/fonts, dove fonts è la cartella che dovete creare e allinterno creeremo una sottocartella con il nome del nostro font e inseriamo tutti i file che abbiamo appena scaricato.
Ora dovete recarvi all’interno del file functions.php e all’interno inseriremo :
add_action(wp_print_styles, add_custom_font);
function add_custom_font() {
$url = http://www.il-nome-del-tuo-sito/wp-content/themes/il-mome-del-tuo-tema/fonts/fingbarger/stylesheet.css;
wp_register_style(fingbangerregular, $url);
wp_enqueue_style(fingbangerregular);
}
Vediamoli nel dettaglio:
/wp-content/themes/tema/fonts/fingbanger, dovete sostituire fingbarger con il nome della vostra cartella dove è presente il font.
wp_register_style(fingbangerregular, $url) : fingbangerregular corrisponde al nome del font e lo trovate precisamente allinterno del file stylesheet.css sulla voce font-family.
Ora basta che inserite il vostro font all’interno del vostro articolo / pagina :
Prova Font
Aggiornamento 11/04/2019 : Ho realizzato un piccolo programmino che permette di creare al volo il codice con il vostro font a questo indirizzo : Crea il font in pochi secondi !. 😉
Fatemi sapere cosa ne pensate e se vi è utile ! Commentate e parliamone !
45 commenti su “Come inserire font personalizzato WordPress”
Come faccio a creare la cartella “fonts”? Non riesco a capire dove devo andare… Ogni tutorial che ho guardato spiega lo stesso procedimento ma nessuno spiega dove trovare la cartella del tema e come creare quella “font” per gli imbranati come me…. =/
Ciao Veronica, ti ringrazio per il commento.
Cerco di aiutarti nel modo più chiaro possibile.
la cartella fonts, o anche con un altro nome la puoi creare dove vuoi all’interno del tuo spazio server. Quello che conta è che il font sia richiamato correttamente;
Fai cosi :
– collegati via ftp per vedere le cartelle del sito, oppure tramite file manager o cio che ti offre il tuo hosting per poter accedere ai file ;
– una volta che vedi cosa contiene il server, devi entrare nella cartella wp-content/themes;
– qua dentro troverai i temi di default di WordPress (che iniziano con twenty) e il tuo tema;
– entri dentro la cartella del tema e crei la cartella “fonts”;
Spero di essere stato chiaro. Prova e se hai problemi cercherò di aiutarti diversamente
Grazie
Grazie della disponibilità ma la mia imbranataggine non aiuta… Io uso Altervista e non riesco proprio a trovare il modo di accedere ai file. =/
Hai 2 possibilità per accedere ai file.
– via ftp –> è il metodo piu veloce ma forse non molto immediato e semplice perchè richiede l’inserimento dei dati dell’hosting;
– direttamente dal pannello dell’hosting –> ( metodo più semplice, ti consiglio questo ) non conosco bene altervista ma ho trovato questo articolo che ti può aiutare e rendere le cose più chiare : https://it.altervista.org/wiki/index.php/Restrizione_d'accesso.
Guarda solamente il punto 1 e 2; li sei dentro ai file.
Ok, grazie mille, ce l’ho fatta! Però mi blocco ancora in un punto… ossia quando mi trovo all’interno del functions.php: la riga di codice che dobbiamo inserire è quella che hai segnato come “codice completo”, giusto? Dobbiamo solo modificare i dati generici con i nostri?
Ma possiamo inserirlo ovunque all’interno del codice o in un punto preciso?
Grazie e scusa per tutte queste domande
Bene.
si esatto inserisci questo codice :
add_action(‘wp_print_styles’, ‘add_custom_font’);
function add_custom_font() {
$url = ‘http://www.il-nome-del-tuo-sito/wp-content/themes/il-mome-del-tuo-tema/fonts/fingbarger/stylesheet.css’;
wp_register_style(‘fingbangerregular’, $url);
wp_enqueue_style(‘fingbangerregular’);
}
Cambi la riga –> http://www.il-nome-del-tuo-sito/wp-content/themes/il-mome-del-tuo-tema/fonts/fingbarger/stylesheet.css
con il tuo percorso dove risiede il file;
prima di inserire il codice fai un backup del file functions.php perchè almeno hai una copia e almeno se non funziona piu basta che lo sovrascrivi con il backup.
In teoria va inserito in fondo rispettando la punteggiatura.
Se vuoi copiami tutto il contenuto del file functions.php e il codice sopra modificato con i percorsi corretti; te lo modifico io e te lo rimando corretto.
Sarebbe fantastico, grazie! Ci sto provando in tutti i modi ma mi da errore e non compare nulla…! D=
Il contenuto del file functions.php è
<?php
/**
* Functions and definitions
*
* Sets up the theme using core fullframe-core and provides some helper functions using fullframe-custon-functions.
* Others are attached to action and
* filter hooks in WordPress to change core functionality
*
* @package Catch Themes
* @subpackage Full Frame
* @since Full Frame 1.0
*/
//define theme version
if ( !defined( 'FULLFRAME_THEME_VERSION' ) ) {
define ( 'FULLFRAME_THEME_VERSION', '2.1' );
}
/**
* Implement the core functions
*/
require get_template_directory() . '/inc/fullframe-core.php';
Mentre il mio sito i chiama veronicarosazzaprin.altervista.org
Il nome del tema è full-frame
E il mio font è veronica_s_per_wordpress
Grazie mille…sono una babbea
Ecco il file con l’aggiunta del codice per il font. Sostituisci tutto il contenuto. Prima fai un back di sicurezza.
<?php /** * Functions and definitions * * Sets up the theme using core fullframe-core and provides some helper functions using fullframe-custon-functions. * Others are attached to action and * filter hooks in WordPress to change core functionality * * @package Catch Themes * @subpackage Full Frame * @since Full Frame 1.0 */ //define theme version if ( !defined( 'FULLFRAME_THEME_VERSION' ) ) { define ( 'FULLFRAME_THEME_VERSION', '2.1' ); } /** * Implement the core functions */ require get_template_directory() . '/inc/fullframe-core.php'; add_action('wp_print_styles', 'add_custom_font'); function add_custom_font() { $url = 'https://www.il-nome-del-tuo-sito/wp-content/themes/il-mome-del-tuo-tema/fonts/fingbarger/stylesheet.css'; wp_register_style('fingbangerregular', $url); wp_enqueue_style('fingbangerregular'); }Devi cambiare la parte finale mettendo il percorso e il nome del tuo font.
nella riga $url = ‘http://www.il-nome-del-tuo-sito/wp-content/themes/il-mome-del-tuo-tema/fonts/fingbarger/stylesheet.css’; –> il percorso del tuo font
wp_register_style(‘fingbangerregular’, $url); –> sostituisci fingbangerregular con il nome del font presente nel file stylesheet.css all’interno della cartella del font sulla voce font-family.
wp_enqueue_style(‘fingbangerregular’); –> sostituisci fingbangerregular con il nome del font presente nel file stylesheet.css all’interno della cartella del font sulla voce font-family.
ciao ma funziona anche in locale? perchè non mi cambia nulla
Ciao Simone, si in locale non dovresti avere problemi.
hai messo il formato dell’indirizzo corretto ? in locale solitamente è : http://localhost/ e poi continui con il tuo percorso di dove risiedono i file.
Salve Simone,
io dovrei inserire due fonti diversi ed ho inserito questa funzione:
function add_custom_font() {
$url = ‘http://www.nomedelsito.it/wp-content/themes/lifestyle-pro/fonts/gothambook/stylesheet.css’;
wp_register_style(‘gothambook’, $url);
wp_enqueue_style(‘gothambook’);
wp_register_style(‘gothammedium’, $url);
wp_enqueue_style(‘gothammedium’);
}
Ma mi genera questo errore: Fatal error: Cannot redeclare add_custom_font() (previously declared in /home/xxx/public_html/wp-content/themes/tema/functions.php:128) in /home/xxx/public_html/wp-content/themes/tema/functions.php on line 139
Ciao Manuela,
l’errore indica che la funzione è già stata dichiarata in precedenza.
In teoria, basta cambiare nome alla funzione e dovrebbe funzionare.
Al posto di function add_custom_font() prova a scrivere per esempio function add_custom_font_nuovo()
Un saluto
Emiliano
ma devo inserire una funziona per ogni nuovo font o c’è un modo per raggruppare i font?
Certo, puoi raggruppare i font in questo modo (ovviamente devi sostituire con i tuoi font):
function add_custom_font() {
$url = ‘/wp-content/themes/nome-tema/fonts/fingbanger/stylesheet.css’;
wp_register_style(‘fingbangerregular’, $url);
wp_enqueue_style(‘fingbangerregular’);
$url = ‘/wp-content/themes/nome-tema/fonts/comfortaa-regular/stylesheet.css’;
wp_register_style(‘comfortaaregular’, $url);
wp_enqueue_style(‘comfortaaregular’);
$url = ‘/wp-content/themes/nome-tema/fonts/comfortaa-regular/stylesheet.css’;
wp_register_style(‘comfortaabold’, $url);
wp_enqueue_style(‘comfortaabold’);
}
Prova e fammi sapere
ma non potrei fare un unico foglio di stile?
Se fai un unico foglio di stile, non preleva correttamente i font.
Anche perchè nel codice, richiami font per font con il suo foglio di stile, e quindi non funzionerebbe.
Se utilizzi il metodo che ti ho indicato funziona senza problemi. L’ho uso io personalmente. 😉
ho provato il modo suggerito e funziona, grazie per l’aiuto!!
Perfetto. 🙂
Un saluto
Ciao Emiliano, grande guida. Grazie mille. Provato e tac..tutto ok al primo colpo!. Due domande veloci…
1) i font custom che voglio andare ad inserire sul mio tema deve essere per forza scaricato da fontsquirrel, oppure posso fare il download di un font da un altro sito e poi fare il web font generato da fontsquirrel caricando il font scelto in precedenza?
2) se volessi inserire più font personalizzati. Diciamo al massimo 3. Cosa dovrei fare? Andare a copiare il codice già inserito una volta nel file function.php dando le giuste info (font family ecc) per ogni font?
davvero ti ringrazio ancora moltissimo per la tua utilissima guida
Ciao,
Marco
Ciao Marco, felice che la mia guida ti sia stata d’aiuto :-).
Ti rispondo per punti :
1) no, assolutamente. Puoi scaricarlo da dove desideri, ma la cosa fondamentale è che utilizzi il fontsquirrel generator per creare il pacchetto di file che “danno vita” al font.
Attenzione solo che, scaricando font da altri siti, non è detto che fontsquirrel, riesca a fare la conversione. Per una compatibilità al 100% usa fontsquirrel.
2) certo, è possibile in questo modo. Supponiamo che hai 3 font, basta che li carichi tutti in successione :
add_action('wp_print_styles', 'add_custom_font'); function add_custom_font() { $url = '/wp-content/themes/mio-tema/fonts/fingbanger/stylesheet.css'; wp_register_style('fingbangerregular', $url); wp_enqueue_style('fingbangerregular'); $url = '/wp-content/themes/mio-tema/fonts/comfortaa-regular/stylesheet.css'; wp_register_style('comfortaaregular', $url); wp_enqueue_style('comfortaaregular'); $url = '/wp-content/themes/mio-tema/fonts/comfortaa-regular/stylesheet.css'; wp_register_style('comfortaabold', $url); wp_enqueue_style('comfortaabold');e poi richiami via css il font che desideri.
Spero ti possa essere utile 🙂
Un saluto
Emiliano
Ciao Emiliano!
Scusami, ma sto sclerando! Tutorial perfetto e molto ben fatto, tutto sommato semplice direi, eppure… non riesco a farlo funzionare e sto diventando scema!
Ho seguito tutto alla lettera, tutto identico, se ti può aiutare il sito è http://www.birrerialostallo.it e le scritte dovrebbero essere tutte come quella che vedi nell’immagine “vieni ai nostri eventi” invece restano tutte “standard”.
Questo è il contentuto del file stylesheet:
@font-face {
font-family: ‘channel_slanted_2regular’;
src: url(‘channel_slanted2_0-webfont.woff2’) format(‘woff2’),
url(‘channel_slanted2_0-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}
Questo è quello che ho messo su fuction.php:
add_action(‘wp_print_styles’, ‘add_custom_font’);
function add_custom_font() {
$url = ‘http://www.birrerialostallo.it/wp-content/themes/Birreria_Lo_Stallo/fonts/channel/stylesheet.css’;
wp_register_style(‘channel_slanted_2regular’, $url);
wp_enqueue_style(‘channel_slanted_2regular’);
}
e per finire questo è il richiamo sullo style.css:
#et-top-navigation {
font-family: ‘channel_slanted_2regular’;
font-weight: 200;
}
Riesci a vedere cosa sto sbagliando?
Grazie mille!
Vanessa
Ciao Vanessa,
grazie per aver seguito la mia guida.
Ho visto il codice e mi sembra tutto corretto, quindi proviamo a capire cosa sta succedendo :
– sei sicura che il percorso dove hai messo il font /wp-content/themes/Birreria_Lo_Stallo/fonts/channel/ sia corretto?
– prova a mettere l’attributo !important alla regola CSS, così :
#et-top-navigation { font-family: 'channel_slanted_2regular'!important; font-weight: 200; }– per favore mi indichi dove hai provato a mettere il font? Nel senso, dove deve essere cambiato? Tutto il font del sito? Così provo anche io.
Un saluto
Emiliano
Ciao Emiliano e grazie per la risposta.
Si, il percorso è corretto.
Ho provato a mettere anche !important (tra l’altro avevo già provato) ma niente, non mi considera proprio.
Nel file style.css la stessa funzione l’ho messa anche per altre 4 parti, te le metto tutte:
#et-top-navigation {
font-family: ‘channel_slanted_2regular’ !imporant;
font-weight: 200;
}
.et_pb_text_0 h4 {
font-family: ‘channel_slanted_2regular’!imporant;
font-weight: 200;
}
.et_pb_fullwidth_menu_0.et_pb_fullwidth_menu ul li a {
font-family: ‘channel_slanted_2regular’!imporant;
font-weight: 200;
}
.et_pb_text_1 h4 {
font-family: ‘channel_slanted_2regular’!imporant;
font-weight: 200;
}
Guardando il sito questo font lo voglio solo nella home page esattamente in testata sia per la scritta “seguici anche su Facebook!” sia per le due voci di menu sottostanti, e nelle altre 4 voci che si vedono sulle botti (chi siamo, birre e panini, le serate, raggiungici).
Grazie mille!
Vanessa
Ciao Vanessa,
potremmo fare cosi : Inviami il pacchetto completo del font (puoi fornirmi momentaneamente un link dove scaricarlo? Poi provvedo a cancellarlo per la privacy –> incollalo pure qui nei commenti ).
Cosi provo ad installarlo e verificare che funzioni.
Di conseguenza ti dirò, se funziona, come mettere tutto a posto.
Spero possa andare bene.
Un saluto
Ciao Emiliano!
Certo, nessun problema. Te l’ho messo su Dropbox a questo link:
(nascosto link per la privacy)
Grazie ancora, un salutone!
Vanessa
Grazie mille! Ti aggiorno al più presto!
Emiliano
Ciao Vanessa,
ho installato il form in una mia versione di test e funziona!
Ho analizzato il tuo sito e ho visto che il problema deriva dal percorso, infatti la console genera un errore 404, perchè non trova il font.
Guarda qui : https://prnt.sc/i7opvr.
Quindi va corretto il path. Vanno fatte delle prove.
Prova cosi :
oppure se non va, lascia come hai messo tu, ma senza l’http dietro :
Prova e fammi sapere
Emiliano
Emiliano sono disperata, sto per volare il pc dalla finestra!!!! 😉
Intanto grazie mille per aver trovato cosa poteva essere. Peccato che non funzioni in nessuno dei due modi. In questo momento ho lasciato il percorso con ‘www.birrerialostallo.it/wp-contet/…….’. Ho provato anche a vuotare la cache ma niente… sig!
Hai altre idee? Io ho riletto quelle righe 87 volte ma non mi viene in mente niente 🙁
Grazie Emiliano!
Vanessa
Emilianooooo!!
Io lavoro con Firefox. Per puro caso ho aperto Chrome e su Chrome funziona!! Ovviamente la cosa non mi risolve il problema perchè comunque deve essere visualizzato da tutti i browser però forse questo ci può aiutare. Comunque non funziona neppure su Edge.. 🙁 Ok, per dovuta informazione..
Grazie ancora!
Vanessa
Se per te va bene, scrivimi via mail qui, ed inviami le credenziali di accesso temporanee (potresti crearmi un account amministratore momentaneo), cosi provo a dare un’occhiata 🙂
Un saluto
Emiliano
Ciao Emiliano.
Alla fine ho dovuto trovare un’altra soluzine: ho installato il plugin Use-Any_Font. E’ gratuito solo per un font per sito ma a me in questo caso bastava. Con questo ho risolto, adesso il font viene correttamente visualizzato. Poi, se troverò la soluzione di questo caso, aggiornerò comunque il post 😉
Grazie di nuovo per la disponibilità e cortesia, davvero!!!
Ciao ciao!
Vanessa
Ciao Emiliano, tutorial perfetto!
Ho seguito tutti i passaggi e sono riuscita ad inserire il font desiderato nel mio sito! Ho però una domanda: se volessi assegnare il font inserito a H1, H3 ecc come devo fare?
Grazie mille se potrai aiutarmi!
Ciao Marzia, felice che il mio tutorial abbia funzionato! 🙂
E’ molto semplice. Devi assegnare uno stile personalizzato all’intestazione desiderata.
Puoi fare cosi :
h1{ font-family:'ilnomedeltuofont'; }oppure
h2{ font-family:'ilnomedeltuofont'; }oppure
h3{ font-family:'ilnomedeltuofont'; }Un saluto!
Emiliano
Ciao,
ho inserito nel child del tema questo font gratuito Snell Roundhand, non l’ho nemmeno scaricato, ho semplicemente inserito questo css:
e funziona in tutti i broswer.
Però ho guardato nella cartella del tema
ma non c’è.
Come mai funziona?
Ciao Alberto,
la cosa è curiosa! 🙂
Potresti mandarmi il link al tuo sito, cosi posso indagare e vedere se riesco a darti una possibile spiegazione?
Un saluto!
Io penso che il motivo è semplice: il font è già esistente nel browser. Io però l’ho installato lo stesso ma ho usato il metodo dei css.
Ah, il piccolo programmino che hai creato non crea il codice corretto: in fondo alla stringa manca l’apice di chiusura.
Questo è il url: oscurato per la privacy
Grazie per il link. L’ho oscurato per la privacy.
Si, immaginavo fosse per quello, ma ero curioso di ispezionare il problema 🙂
Potrebbe anche essere, che essendo un Font Google (non so se lo è), sia già presente, di conseguenza lo vedi.
Grazie della segnalazione! Provvederò a correggere.
Grazie mille!
In ogni caso ho creato questo css, in questo modo non essendoci codice php è più leggero, inoltre se il font è già presente nel browser lo pesca da li evitando così di caricarlo 2 volte
@font-face {
font-family: SnellRoundhand;
src: local (‘SnellRoundhand’),
url(‘https://tuosito.it/wp-content/themes/wp-portfolio/font-awesome/snell-roundhand/SnellRoundhand.woff2’) format(‘woff2’),
url(‘https://tuosito.it/wp-content/themes/wp-portfolio/font-awesome/snell-roundhand/SnellRoundhand.woff’) format(‘woff’),
url(‘https://tuosito.it/wp-content/themes/wp-portfolio/font-awesome/snell-roundhand/SnellRoundhand.ttf’) format(‘truetype’),
url(‘https://albertifoto.it/wp-content/themes/wp-portfolio/font-awesome/snell-roundhand/SnellRoundhand.eot’) format(‘embedded-opentype’);
}
Grazie mille Alberto! 🙂
Appena ho modo aggiornerò l’articolo inserendo il tuo CSS e ovviamente facendo riferimento a te!
Un saluto!
Un’ultima cosa: ho notato che la cartella del font viene inserita nel tema-child non funziona. La cartella va inserita nella directory del tema principale.
Comunque farai le tue prove.
Il codice che avevo dato prima non funzionava correttamente, non trovava il font personale, ma solo quello di default nel browser (in caso ci fosse), quello che ti do ora l’ho testato più a fondo e l’ho corretto.
@font-face { font-family: SnellRoundhand; src: local ('SnellRoundhand'); src: url('https://miosito.it/wp-content/themes/wp-portfolio/font-awesome/snell-roundhand/SnellRoundhand.woff2') format('woff2'), /* Browser super moderni */ url('https://miosito.it/wp-content/themes/wp-portfolio/font-awesome/snell-roundhand/SnellRoundhand.woff') format('woff'), /* Browser abbastanza moderni */ url('https://miosito.it/wp-content/themes/wp-portfolio/font-awesome/snell-roundhand/SnellRoundhand.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://miosito.it/wp-content/themes/wp-portfolio/font-awesome/snell-roundhand/SnellRoundhand.eot') format('embedded-opentype'), /* IE9 */ url('https://miosito.it/wp-content/themes/wp-portfolio/font-awesome/snell-roundhand/SnellRoundhand.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */ }Perfetto! Grazie ancora! 🙂
Gentile Emiliano, sono giorni che provo e riprovo con il tuo tutorial ma davvero non riesco a venirne a capo.
I Font che inserisco non sono visibili.
Mi aiuteresti?
Grazie mille
Ciao Giuseppe,
proverò ad aiutarti.
Mi dici qual’è il font che vuoi inserire?
Come lo inserisci?
Grazie
Ciao Emiliano, sono un mezzo neofita. Uso enfold, ho creato un tema child, sul file manager ho caricato la cartella fonts. Poi ho scaricato functions.php sul pc e questo era il contenuto originale:
<?php
/*
* Add your own functions here. You can also copy some of the theme functions into this file.
* WordPress will use those functions instead of the original functions then.
*/
Dopo le mie modifiche, il php è così:
<?php
/*
* Add your own functions here. You can also copy some of the theme functions into this file.
* WordPress will use those functions instead of the original functions then.
*/add_action(wp_print_styles, add_custom_font);
function add_custom_font() {
$url = http://www.thebestofpalermo.it/wp-content/themes/enfold-child/fonts/diodrum/stylesheet.css;
wp_register_style(diodrum_roundedbold, $url);
wp_enqueue_style(diodrum_roundedbold);
}
Salvo il file, lo sostituisco dentro il file manager, ma poi ricevo l'errore:
Parse error: syntax error, unexpected ':' in /web/htdocs/www.thebestofpalermo.it/home/wp-content/themes/enfold-child/functions.php on line 9
Dove sbaglio?