Come inserire font personalizzati su WordPress

Stanco dei soliti font di WP? Personalizza il tuo blog con un font personalizzato cosi potrai rendere davvero unico il tuo blog. Per inserire il font che preferisci nei tuoi articoli basta seguire questa semplice guida!

Ecco come fare:

1. Cerca e scarica sul tuo pc il font che desideri utilizzare, usa siti come 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 stylesh

eet.css nella

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 cercaentry-title, poi inserisci (o modifica se già esiste) il tipo di font da utilizzare tramite font

Nel mio esempio il font è BelleroseLight, quindi diventa .entry-title { font-family: BelleroseLight; }   .

-family: font-da-utilizzare; .cartella bellerose-light, solitamente è uguale al nome del font). Attenzione al Case Sensitive,  c’è differenza tra maiuscole e minuscole. Inserisci correttamente l’url!