Domande o Richieste ? al 3496993121 | Email | Preventivo
Scopri la nostra Assistenza Speciale per Wordpress

Come inserire font personalizzato WordPress

Come inserire font personalizzato WordPress

come-inserire-font-personalizzato-wordpress

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;
webfont-generator

Avrete una schermata di questo tipo :

webfont-generator-font

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, all’interno del nuovo file “zippato”, sono contenuti i file necessari a installarlo sul vostro sito.
file-font-squirrel
Ora dovete recarvi all’interno 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 all’interno 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 :

Questo è il codice completo che potete copiare e incollare nel file functions.php :

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 all’interno del file stylesheet.css sulla voce font-family.

Ora basta che inserite il vostro font all’interno del vostro articolo / pagina :

<p style="font-family: 'fingbangerregular';">Prova Font</p>

Aggiornamento 11/04/2016 : 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 !

About Emiliano

Mi chiamo Emiliano Prelle, web designer freelance, con la passione per il web e la tecnologia e tutto quello che le ronza intorno.
Mi occupo di sviluppo, progettazione e realizzazione siti internet ( sviluppati in particolare con WordPress ), grafica e SEO.

11 Commenti
  1. 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.

  2. 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 = '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'); }

      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.

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

Lascia un commento

Contatti

Loranzè, via Fiorano n 83
10010 ( TO )
Cell: 3496993121
Email: Scrivimi via email
P.IVA: 11315150018
Operiamo nel rispetto della tua Privacy

desclaimer

Il sito www.emprsitiweb.com è di proprietà di Prelle Emiliano e da esso gestito. La veste grafica, le immagini ed i testi presenti nel sito sono soggetti a copyright da Prelle Emiliano e/o dei rispettivi proprietari e non possono essere riprodotti o trasmessi con nessun mezzo, né essere utilizzati in ambito professionale o commerciale senza autorizzazione scritta da Prelle Emiliano o dei legittimi proprietari.

Ultima dal Blog

Social

Resta aggiornato su WordPress !

Guide/Tutorials per WordPress

Suggerimenti e trucchi per WordPress

Un Report 100% gratuito che ti aiuta ad evitare gli errori più comuni per il tuo sito WordPress

Se ti iscrivi, riceverai periodicamente : 

Rispettiamo la privacy. La tua Email verrà solo utilizzata per questa newsletter, e non sarà ceduti a terzi.

Grazie per la tua iscrizione !

Miraccomando : Clicca sul seguente LINK, per visionare tutte le informazioni ed i dettagli relativi alla tua iscrizione !

Ti anticipo, che devi cliccare sul link di conferma che ti ho appena inviato al tuo indirizzo email per poter essere iscritto correttamente alla newsletter. Questo ti permetterà di ricevere tutti gli aggiornamenti ed il report free, sui 25 errori più comuni di WordPress, che ho preparato per te !

Nella mail troverai tutte le informazioni del caso.

Nb: Se la mail non arriva subito, non preoccuparti; causa ritardi del server può impiegarci anche fino a 2 ore.

I 25 Errori WordPress più comuni da evitare 

Iscrivendoti al blog ricevi gratuitamente una report in cui ti mostro i 25 errori più comuni che commettono i principianti in WordPress in fase di realizzazione di un Sito Web. 

Iscriviti ed ottieni il report gratuito !

*Lo scarichi in 5 secondi. 100% Gratis

Rispettiamo la privacy. La tua Email verrà solo utilizzata per questa newsletter.

Grazie per la tua iscrizione

Miraccomando : Clicca sul seguente LINK, per visionare tutte le informazioni ed i dettagli relativi alla tua iscrizione !

Ti anticipo, che devi cliccare sul link di conferma che ti ho appena inviato al tuo indirizzo email per poter essere iscritto correttamente alla newsletter. Questo ti permetterà di ricevere tutti gli aggiornamenti ed il report free, sui 25 errori più comuni di WordPress, che ho preparato per te !

Nella mail troverai tutte le informazioni del caso.

Nb: Se la mail non arriva subito, non preoccuparti; causa ritardi del server può impiegarci anche fino a 2 ore.