Mo­di­fi­ca­re il font in WordPress

Vi sono diversi modi per mo­di­fi­ca­re il font in WordPress. Il primo è for­mat­ta­re i blocchi di testo o le singole sezioni di­ret­ta­men­te nell’editor. Seppure sia il metodo più semplice, a lungo andare può portare il vostro sito web ad avere un aspetto non uniforme. È meglio definire i font per l’intero sito nel tema, così da as­si­cu­ra­re un design unico e coerente. Tuttavia, per apportare delle modifiche occorrono cre­den­zia­li da am­mi­ni­stra­to­re e co­no­scen­ze tecniche. Vi mostriamo come procedere al meglio per mo­di­fi­ca­re il font in WordPress.

Vediamo il metodo più semplice per mo­di­fi­ca­re il font di un sito WordPress già esistente. Nor­mal­men­te il tema usato definisce un font per l’intero testo. Sup­po­nia­mo che si tratti di un generico Sans-Serif e che de­si­de­ria­mo mo­di­fi­ca­re i titoli passando al font Serif. In WordPress questa ope­ra­zio­ne implica due passaggi:

1. Definire il font per gli elementi HTML in CSS
2. Inserire il codice CSS in WordPress

Per impostare il font di un elemento HTML uti­liz­zia­mo la proprietà CSS “font family”. L’uso della regola “@font-face” serve a definire i propri font.

Diamo anzitutto un’occhiata a come si configura in CSS il font per un elemento HTML. Sup­po­nia­mo di voler uti­liz­za­re il font Serif per i titoli da H1 sino a H6. Per farlo ri­cor­ria­mo al seguente codice:

Per ag­giun­ge­re un font su un sito web occorre un font per il web, sca­ri­ca­bi­le di­ret­ta­men­te da Google Fonts o da una piat­ta­for­ma simile. Dopodiché sarà suf­fi­cien­te integrare in WordPress un foglio di stile ag­giun­ti­vo ospitato da Google. Tuttavia, in alcuni casi questa procedura può destare pre­oc­cu­pa­zio­ni per la tutela dei dati personali. Inoltre, il metodo uti­liz­za­to per integrare il font per il web può in alcuni casi pre­giu­di­ca­re le pre­sta­zio­ni del sito. Per questo motivo è pre­fe­ri­bi­le ospitare i font all’interno della cartella dei temi sul server di WordPress.

Ospitare i font per il web au­to­no­ma­men­te è più facile a dirsi che a farsi. La miglior cosa da fare è servirsi di un programma apposito, il quale dai file dei font caricati è in grado di generare tutti i comuni formati di font e il codice CSS ne­ces­sa­rio. Negli anni, Font Squirrel si è affermato come standard. In al­ter­na­ti­va, si può ricorrere a un plugin come Use Any Font per ag­giun­ge­re un ulteriore font in WordPress.

Rias­su­mia­mo i metodi più usati per ag­giun­ge­re un font su WordPress. Ognuno di questi presenta dei pro e contro:

Fin qui abbiamo parlato di come mo­di­fi­ca­re il font su WordPress. Ora andiamo a vedere con quali metodi si possono mo­di­fi­ca­re le di­men­sio­ni e il colore dei caratteri in WordPress. In linea di massima uti­liz­zia­mo lo stesso pro­ce­di­men­to col quale si modifica il font in WordPress:

1. Lo­ca­liz­za­re l’obiettivo di un elemento e iden­ti­fi­ca­re il selettore
2. Creare i prototipi delle regole CSS in Web Inspector
3. Integrare le in­di­ca­zio­ni CSS in WordPress

Vediamo in sintesi le istru­zio­ni CSS più im­por­tan­ti per mo­di­fi­ca­re di­men­sio­ne e colore dei caratteri in WordPress:

Esa­mi­nia­mo nuo­va­men­te il caso più semplice: de­si­de­ria­mo mo­di­fi­ca­re la di­men­sio­ne del carattere per l’intero sito in WordPress. A questo scopo uti­liz­zia­mo un elemento HTML radice come selettore e usiamo la per­cen­tua­le per la di­men­sio­ne del carattere. Per capire in­tui­ti­va­men­te come avviene la modifica della di­men­sio­ne:

• “Aumentare il carattere del 10%”: html { font-size: 110%; }
• “Diminuire il carattere del 10%”: html { font-size: 90%; }

Come pro­ce­dia­mo ora, per adattare la di­men­sio­ne del carattere a de­ter­mi­na­ti elementi? Prendiamo ad esempio i titoli da H1 sino a H6. Vi mostriamo anzitutto quello che non dovete fare:

Qua vi sono due cose che non vanno: da un lato i pixel (“px”) vengono uti­liz­za­ti come unità assoluta, dall’altro le singole di­men­sio­ni del carattere vengono se­le­zio­na­te in modo ar­bi­tra­rio. Tutto ciò porta ad avere un design in­con­si­sten­te e poco fun­zio­na­le. Questi due “anti-pattern” possono essere ri­scon­tra­ti in molti temi WordPress, anche tra quelli com­mer­cia­li. La miglior cosa da fare consiste nell’uti­liz­za­re unità relative per definire le di­men­sio­ni del carattere. Con l’unità “rem” le im­po­sta­zio­ni del font dipendono dall’elemento HTML radice. “2rem”, ad esempio, cor­ri­spon­de a “due volte la di­men­sio­ne del carattere normale”.

La com­bi­na­zio­ne tra la per­cen­tua­le per l’elemento HTML radice e le istru­zio­ni rem per tutti gli altri elementi del testo si presta per­fet­ta­men­te per un design re­spon­si­ve. Bastano poche CSS media query per adattare le di­men­sio­ni del carattere dell’elemento HTML radice a schermi di varie larghezze. Tutti gli altri elementi del testo scalano in au­to­ma­ti­co, con­ser­van­do tuttavia le pro­por­zio­ni tra loro:

Resta la questione di quale criterio uti­liz­za­re per definire la di­men­sio­ne dei singoli elementi del testo. Come già accennato, non è una buona idea se­le­zio­na­re valori in modo ar­bi­tra­rio. Le scale ti­po­gra­fi­che sono ispirate ad armonie musicali e si fondano su formule ma­te­ma­ti­che come la sezione aurea. Lo sca­glio­na­men­to di dif­fe­ren­ti di­men­sio­ni del font secondo una scala ti­po­gra­fi­ca porta a ottenere un aspetto armonico. Sul web si possono trovare degli appositi ge­ne­ra­to­ri in grado di generare au­to­ma­ti­ca­men­te il codice CSS di cui avete bisogno. Mostriamo qui ad esempio la scala ti­po­gra­fi­ca del framework “Tachyons”:

Forse lo avrete già intuito: per mo­di­fi­ca­re il colore del carattere in WordPress, non se­le­zio­nia­mo l’intero testo di una pagina, ma ne scegliamo uno nuovo dal menu. Pro­ce­dia­mo ana­lo­ga­men­te a quanto già spiegato per la scelta del font, usando il codice CSS per definire il colore. CSS offre ti­pi­ca­men­te diversi metodi per farlo e per questo non è possibile il­lu­strar­li tutti det­ta­glia­ta­men­te. Le seguenti regole CSS sono equi­va­len­ti:

Come potete vedere, per stabilire il colore del font per l’intero sito uti­liz­zia­mo l’elemento body HTML con la proprietà CSS “color”. Tutti gli altri elementi del testo di­scen­do­no da questo. All’oc­cor­ren­za possiamo so­vra­scri­ve­re il valore del colore ereditato per spe­ci­fi­che classi di elementi. Per con­fi­gu­ra­re i titoli in grigio scuro, ad esempio, ci serviamo del seguente codice:

Il colore del carattere, così come il font, è un elemento es­sen­zia­le di design. I colori, in modo par­ti­co­la­re, tra­smet­to­no emozioni. Per questa ragione è im­por­tan­te rimanere sobri e non uti­liz­za­re troppi colori diversi su un sito. Un ab­bi­na­men­to cromatico poco riuscito che trasmette ir­re­quie­tez­za può ad­di­rit­tu­ra far scappare il vi­si­ta­to­re dal sito. Nel dubbio vale la regola: meno è meglio.

Per una buona usabilità risulta im­pre­scin­di­bi­le garantire un rapporto di contrasto suf­fi­cien­te­men­te alto, così da rendere i testi leggibili senza sforzo. For­tu­na­ta­men­te si possono calcolare i valori di contrasto per le com­bi­na­zio­ni del testo e del colore dello sfondo. Il già citato framework “Tachynos” comprende una tabella dei colori pronta all’uso assieme a diverse com­bi­na­zio­ni di contrasto. Non si sbaglia di certo a copiare questi valori cromatici per il proprio sito WordPress.

A seconda dell’editor uti­liz­za­to è possibile mo­di­fi­ca­re il colore del font in WordPress senza CSS. Questo metodo porta so­li­ta­men­te a un risultato finale in­con­si­sten­te e pertanto non risulta essere una buona idea. Il moderno editor WordPress Gutenberg offre una soluzione pra­ti­ca­bi­le che si colloca a metà strada. Infatti, Gutenberg dispone di una scala di colori pre­de­fi­ni­ta che può essere adattata ai colori del tema. As­se­gnan­do a un blocco un colore di testo pre­de­fi­ni­to, l’editor inserisce solamente un paio di classi CSS. In questo modo viene mantenuta la se­pa­ra­zio­ne. All’oc­cor­ren­za, le classi possono essere so­vra­scrit­te o di­sat­ti­va­te in un secondo momento.

Gutenberg consente anche l’as­se­gna­zio­ne di un “colore in­di­vi­dua­le” per singoli paragrafi, tuttavia, sarebbe opportuno evitare di farlo. Infatti, al posto di un nome di classi pre­de­fi­ni­to, l’editor inserisce il singolo colore come valore cromatico hard-coded tramite stile Inline nel codice HTML. Come potete vedere qui di seguito, a titolo d’esempio:

Gli stili Inline pos­sie­do­no la più alta spe­ci­fi­ci­tà CSS e so­prav­vi­vo­no osti­na­ta­men­te a un suc­ces­si­vo redesign. Perciò è con­si­glia­bi­le di­sat­ti­va­re i colori in­di­vi­dua­li nell’editor. Tra­scri­via­mo il seguente codice nel file functions.php del nostro tema child:

In al­ter­na­ti­va potete di­sat­ti­va­re com­ple­ta­men­te la scala di colori di Gutenberg. Usiamo nuo­va­men­te il file functions.php: