Come cambiare font in WordPress facilmente

15 Feb 2020 - Guide, Wordpress


Come cambiare font in WordPress facilmente

In questa guida, vedremo come cambiare un font nel tuo sito web realizzato in WordPress, facilmente

Oggi vediamo insieme come cambiare un font in WordPress in modo facile e veloce.

Vi sarà capitato spesso di realizzare siti web, passando ore cercando il tema più adatto alle esigenze del cliente sia nell’aspetto che nelle funzionalità vero?!

E quante volte il cliente vi ha detto “ma si può cambiare quel font che così proprio non mi piace”, nonostante non abbiano minimamente le competenze grafiche e tecniche per esprimere un giudizio?

Bene, qui per alcune persone inizia il dramma, in quanto WordPress non ha una funzione nativa che permetta di andare a sostituire un font da uno all’altro e i temi che permettono di scegliere quale font utilizzare non sono molti, direi che sono quelli più commerciali e “multipurpose” che si prestano a molteplici usi.

Ma come cambiare font in WordPress in modo facile e veloce?

Scegliere il font che si vuole inserire nel sito web

Online ci sono molti servizi che permettono di comprare font o di scaricarne di gratuiti, come adesempio Google Fonts, Dafont, Fontsquirrel, Fontfabric tra i primi risultati in una ricerca in Google, o Adobe Edge Web Font o con Font.com o con plugin inseribili all’interno di WordPress.

Ma quindi quale metodo scegliere?

Noi della 360smartweb ci sentiamo di dirvi di inserirli manualmente, ma per fare ciò dovrete avere pieno controllo del sito web, avendo accessi FTP del vostro sito.

Quali tipi di font esistono?

True Type Fonts (TTF)
Forse il formato di font più conosciuto, sviluppato da Microsoft e compatibile con tutti i browser.

Open Type Fonts (OTF)
Anche questo formato è stato sviluppato da Microsoft, e come il TTF è supportato da tutti i browser.

Web Open Font Format (WOFF)
Sono font ottimizzati per il caricamento online, che aumentano la velocità di caricamento, e per questo consigliati dai creatori del noto plugin (W3T)

WOFF 2.0
Più compressi rispetto ai WOFF normali, con velocità di caricamento ancora più bassa, ma non supportati da browser come safari e ie, ma pienamente funzionanti con Chrome, Firefox ecc.

Embedded Open Type Fonts (OTF)
Sono font incorporati all’interno di una pagina e supportati da tutti i browser.

Convertire un font per rendere sicura la sua compatibilità

Web Font Generator

Uno dei servizi più conosciuti per la conversione dei font per il web è senza dubbio Web Font Generator.

La procedura è veramente semplice; non appena avete scaricato i file del font che vi serve da uno dei servizi sopra citati basterà che seguiate questi punti:

  • Accedete a Web Font Generator
  • Caricate il vostro file cliccando su “upload font” stando attenti alle condizioni contrattuali del font che avete scelto (controllate sempre che possano essere utilizzati all’nterno di un sito web, o in grafiche. alcune volte è richiesto l’accredito dell’autore, in caso di font free, cosa che non dovrebbe accadere con quelli a pagamento)
  • Scegliete la compressione del vostro file in uscita
  • accettate il trattamento dei vostri dati
  • Adesso cliccate su “download your kit”

Verrà fornito un file .zip contenente i vosti font ottimizzati per il web.

Inserire font manualmente nel sito web

Vediamo adesso come inserirli correttamente e manualmente all’interno del vostro sito web (questa procedura a bene sia per un sito creato in WordPress che in altri CMS o in semplice html).

Utilizzo di Google Font

Google Fonts
Google Fonts

Il miglior metodo, se riuscite a trovae il font che vi piace o che vi interessa, è quello di utilizzare Google Fonts che ha un vastissimo assortimento di fonts gia ottimizzati per il web, e subito disponibili per essere scaricati e inseriti.

Una volta che siete all’interno del sito web, sceglietene uno cliccando sulla “x” rossa relativa al font, e in automatico ve lo ritroverete in un finestrella in basso a destra.

Basta cliccarci sopra e vi appariranno i dettagli come da immagine qui sotto

Come potete vedere, c’è un link per l’embed automatico del font; basta inserirlo all’interno del tag head e tutto funziona.

La voce “specify in CSS” vi spiega come andare a richiamarlo, in questo caso sarà:

h1 {
font-family: 'Roboto', sans-serif;
}

ovviamente potete assegnare il font a tutte le classi e stili che volete.

Caricare font da function.php in WordPress

In caso si voglia caricare direttamente in WordPress, c’è un piccolo codice da inserire all’interno della funzione di richiamo dei fogli di stile

if(! function_exists('tuosito_styles') ) {

  function tuosito_styles(){
    wp_enqueue_style('tuosito-font','//fonts.googleapis.com/css?family=Roboto:300,400,700');

  }
}

add_action('wp_enqueue_scripts','tuosito_styles');

quella porzione di codice da inserire dopo // la potrete recuperare dall’immagine precedente 😉

NB: i numeri che ci sono dopo la scritta “Roboto” sono il classico “font-weight” che volete venga caricato.

Procedura generica per inserire i font manualmente nel sito web

Per la procedura manuale, è necessario che abbiate gli accessi ftp del vostro sito web.

Accedete con un client FTP (come FileZilla o Coda 2) alla root principale e create la cartella /fonts/ all’interno del tema child, in caso di WordPress (vedi qui come creare un tema child per WordPress) o nella root principale in caso di sito in html.

Una volta inseriti i file che vi servono dovete semplicemente caricarli all’interno dello style.css o in un tag <style></style> all’interno di una pagina (sempre meglio caricarlo nell’head).

La sintassi con cui caricare il font è la seguente:

@font-face {
   font-family: 'Nome con cui vorrete richiamare il vostro font';
   src: url('font/nomefont.ext') format('truetype');;
}

Adesso per assegnare il font, per esempio ad i titoli ed i paragrafi, la sintassi è la seguente:

h1, h2, h3, h4, h5, h6, p {font-family: "Nome di richiamo scelto prima"}

Voilà… ricaricate la vosta pagine e assicuratevi che la procedura sia andata a buon fine.

Cambiare o aggiungere font a WordPress con un plugin

Wp Google Fonts

Wp Google Fonts
Wp Google Fonts

Wp Google Fonts è sicuramente il più conosciuto.

Questo plugin fa esattamente la solita procedura appena descritta, in auomatico, permettendovi di scegliere sia il tipo di carattere da Google Font e scegliare a quali elementi assegnare il nuovo carattere.

Per installarlo basta andare in “plugin > aggiungi nuovo> cercare Wp Google Fonts e installarlo/attivarlo”.

Use Any Font

Use Any Font
Use Any Font

Altro plugin che permette di caricare i font scaricati (OTF TTF ecc) e di assegnarli a classi specifiche.

Per installarlo basta andare in “plugin > aggiungi nuovo> cercare Use Any Font e installarlo/attivarlo”.

Cambiare font in WordPress attraverso il tema acquistato.

Come detto ad inizio articolo, ci sono dei temi che permettono di cambiare il font in WordPress attraverso le impostazioni del tema, o addirittura scegliendo l’opzione elemento per elemento.

Solitamente questi temi, sono quelli “multipurpose” ( che vanno bene in più situazioni ) e solitamente sono quelli più scelti dalle persone o che non hanno voglia di stare a smanettare con lo sviluppo del sito o che non ne sono proprio capaci o che, per motivi di tempo, si trovano a dover utilizzarli.

Questi temi, sono reperibili tramite Google, o tramite un noto servizio di raccolta di Temi, template, plugin, grafiche, suoni ecc, dal nome Themeforest.

Andando nella sezione temi > WordPress, potrete trovare migliaia di temi tra cui quelli di cui vi sto parlando. solitamente hanno 5 stelline, con migliaia di recensioni.

I più famosi sono:

Detto questo, la particolarità che li accomuna, è il fatto di avere un visual composer integrato che esso sia “Bakery Composer” o un plugin come Elementor o il nuovo Oxigen (i temi elencati hanno solo il Bakery composer o un composer simile nativo).

Comunque, chi un un modo chi in un altro, tutti questi permettono di cambiare font in WordPress.

Alcuni attraverso la sezione dedicata del tema, alcuni direttamente sull’elemento singolo ( Come Bakery) infine, alcuni permettono entrambe le soluzioni.

Esempio di schermata tramite il Visual Bakery Composer

Conclusioni

Come potete vedere dala guida, è molto semplice fare tutto ciò, basta avere un pizzico di familiarità con i CSS e con gli account FTP.

In caso aveste problemi di attuazione, contattatemi andando nella sezione contatti.

POST CORRELATI

Massimiliano Piacentini

Proprietario di 360Smartweb

Dopo vari anni passati come graphic designer e dopo molti corsi, ho seguito la mia massima passione: lo sviluppo di siti web in html, php e WordPress. Il design web è stata una semplice conseguenza di tutte le mie skills che mi permettono, seguendo le best practices, per dare una User Experience sui siti creati.