Come aggiungere un carattere personalizzato a un tema WordPress con @fontface CSS3

Dichiarare un font personalizzato nel tuo tema WordPress è molto utile per personalizzarlo e adattarlo alla tua carta grafica. Tuttavia, a volte il carattere dei tuoi sogni non si trova nelle opzioni del tema, né su Google Fonts o TypeKit.

In questo caso, dovrai modificare leggermente il tema per aggiungere il carattere che desideri. Ma niente panico, ti spiego come fare!

Scarica il carattere

Prima di tutto, devi avere il carattere, scaricandolo da siti di caratteri come dafont per esempio, o con i tuoi mezzi.

Attenzione ai diritti d'autore, che dovete rispettare. Non esitate ad acquistare il carattere quando necessario. Pagherai solo chi ci ha lavorato affinché tu possa godertelo!

I formati TTF e OTF sono attualmente ampiamente utilizzati e sono compatibili con la maggior parte dei browser. Tuttavia, se devi convertire il carattere in altri formati, vai a Carattere Scoiattolo.

Carica il carattere sul tuo server

Carica il tuo carattere in una cartella "fonts" nel tuo tema (preferibilmente tema figlio), tramite FTP.

Dichiara il tuo nuovo carattere nel tuo CSS

Vai al file CSS del tema child se hai caricato il font nella cartella “fonts” del tema child, altrimenti nel file CSS del tema parent, o nelle impostazioni del tuo tema se ti permette di personalizzare i CSS tramite il back office di WordPress. Ecco come farlo:

@font-face { famiglia di caratteri: myfont; src: url("fonts/mapolice.otf"); src: url(fonts/mapolice.ttf) format('truetype'); peso carattere: normale; }

Utilizza il nuovo carattere tramite CSS

Per utilizzare il nuovo font appena dichiarato, niente di più semplice, devi solo dire al file CSS a quali formati vuoi assegnare il font:

p,span {famiglia di caratteri: mapolice, Open Sans, Arial, sans-serif !important;} h1,h2,h3,h4,h5,h6 {famiglia di caratteri: mapolice, Open Sans, Arial, sans-serif !important ;} ;} div {famiglia di caratteri: mapolice, Open Sans, Arial, sans-serif !important;}

Ed ecco qua, se questo articolo ti è stato d'aiuto, non esitare a condividerlo sui social 😉