Utilizzando questo sito accetti il nostro uso dei cookie. Approfondisci

Come inserire font personalizzato in un blog wordpress

Come inserire font personalizzato in un blog wordpressPer 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:


  1. Cerca e scarica sul tuo pc il font che desideri utilizzare, ad esempio consiglio dafont.com
  2. 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.
  3. Estrai i file e rinomina, con il nome del font, la cartella che è stata generata. Nel mio esempio la cartella si chiamerà bellerose-light.
  4. Crea la cartella fonts nella cartella del tema, otterrai una cosa del genere: www.nome-sito.it/wp-content/themes/nome-tema/fonts/
  5. Carica via ftp l’intera cartella del punto 3 nella cartella fonts appena creata.
  6. 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?

Scegli uno tra i migliori hosting per WordPress

HOSTING

Scegli uno tra i migliori hosting per WordPress

Hosting

Scegli uno tra i migliori temi WordPress professionali

GRAFICA

Scegli uno tra i migliori temi WordPress professionali

Grafica

Guide e risorse per gestire il sito WordPress a 360°

GESTIONE

Guide e risorse per gestire il sito WordPress a 360°

Gestione

EMAIL NEWSLETTER

Vuoi ricevere i miei ultimi articoli
comodamente nella tua email? È gratis!
Ben 3552 persone lo stanno già facendo!
Anonimo
   
con le dita sempre in costante, frenetico movimento sulla tastiera… vengo spesso trascinato e catturato “in rete” per colpa delle mille idee che mi girano per la testa (prima o poi troverò quella giusta)… dal futuro incerto (nonostante una laurea, e chi non lo è?..siamo in tanti!) .. credo fortemente nella condivisione della conoscenza!
32 Commenti
  • Sara

    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!

    • Roberto

      Grazie mille! :)

  • Sonny

    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?

    • Roberto

      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.

  • Davide

    e l’url? A cosa si riferisce di preciso?

    • Roberto

      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.

      • Markone

        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

        • Roberto

          No, il tuo carattere non verrà riconosciuto da nessun browser, questi contengono solo dei caratteri standard, mi dispiace.

          Ciao
          Roberto

          • Markone

            Un vero peccato….ti ringrazio del chiarimento.

  • Apache 72

    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

    • Roberto

      Probabilmente hai sbagliato ad inserire il codice, magari le virgolette oppure lo hai inserito in un punto non esatto, fai delle prove

  • Antonio

    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!

    • Roberto

      Ci sono anche altrim plugin che lo fanno, ma io preferisco questo perchè è molto più leggero (in termini ti kB)… è molto semplice da effettuare…

  • ASTRID

    Ciao. cerco di fare come dici, ma mi rimanda ad un warning appena cerco di aggiungere la stringa…

    • Roberto Iacono

      Mi puoi riportare esattamente cosa ti dice e dove?
      Grazie

  • luigismith

    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.

  • Elena

    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

    • Roberto Iacono

      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.

  • Simone

    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!

    • Roberto Iacono

      Grazie mille Simone per il tuo contributo! Ottima soluzione!

  • fraska

    Che font è questo?:D

  • Guidetutorials

    Bell’articolo, in alternativa si può utilizzare anche il plugin WP Google Fonts che permette di utilizzare le font di google

  • vins

    vorrei aumentare le dimensione delle voci del menu, mi daresti una dritta?.Grazie

    • Roberto Iacono

      Leggi http://www.robertoiacono.it/come-dove-modificare-wordpress/ , poi usa font-size: 30px;

  • gianluca

    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

    • Simone

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

      • Roberto Iacono

        Puoi fare in due modi, o usi una seconda variabile $url2, oppure riutilizzi ancora $url ma alla fine (dopo wp_enqueue_style(‘BelleroseLight’); )

    • Roberto Iacono

      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

  • Simone.p

    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 :)

Seguimi

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13584+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13584+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.
Unisciti agli oltre 10999 lettori
che seguono questo blog
3152
982
2251
4614