Come cambiare font in WordPress facilmente
Tempo di lettura: 6 minuti
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.
Aggiungere font personalizzati
Vediamo adesso come aggiungere font personalizzati manualmente all’interno del vostro sito web (questa procedura va bene sia per un sito creato in WordPress che in altri CMS o in semplice html).
Utilizzo di Google Font
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.
Usare font personalizzati in WordPress tramite la function.php
In caso si voglia usare font personalizzati in WordPress, è necessario inserire un piccolo codice all’interno della funzione di richiamo dei fogli di stile nella function.php
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.
Come integrare font personalizzati tramite @font-face
Per integrare font personalizzati tramite l’utilizzo di @font-face, è 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).
Font personalizzati CSS
Per inserire font personalizzati CSS 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 è 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
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.
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.
