Come inserire font personalizzato in 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.

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; 
}