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.

Come fare 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.

Come con­fi­gu­ra­re un font per un elemento HTML in CSS?

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:

h1, h2, h3, h4, h5, h6 {
    font-family: serif;
}

Come si includono codici CSS ag­giun­ti­vi in WordPress?

Esistono metodi dif­fe­ren­ti per integrare porzioni di codice CSS ag­giun­ti­vo in WordPress. In base a come è stato creato il tema si sceglie quale uti­liz­za­re. Temi com­mer­cia­li e page builder offrono spesso una propria im­po­sta­zio­ne per inserire CSS ag­giun­ti­vo. Mostriamo due metodi d’uso comune, fun­zio­nan­ti con la maggior parte dei temi conformi allo standard WordPress:

1. Uti­liz­za­re la per­so­na­liz­za­zio­ne del tema di WordPress per integrare i codici CSS ag­giun­ti­vi (vedi screen­shot)
2. Integrare porzioni di codice CSS ag­giun­ti­ve con il file functions.php, ideal­men­te in un tema child. La procedura specifica è descritta nel nostro tutorial “Come mo­di­fi­ca­re un header su WordPress”

Close

Close

Close

Come ag­giun­ge­re un ulteriore font in WordPress?

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.

Come ospitare un font per il web in 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.

Font Squirrel

Close

Close

Use Any Font

Close

Close

Close

Close

Close

Close

Close

A cosa servono gli icon font?

Oltre ai font per il web per la ri­pro­du­zio­ne testuale ci sono anche i tanto ap­prez­za­ti icon font. I co­sid­det­ti glifi di un font non raf­fi­gu­ra­no alcuna lettera, ma si tratta sem­pli­ce­men­te di forme definite ma­te­ma­ti­ca­men­te. Così le icone possono essere ri­pro­dot­te e uti­liz­za­te, ad esempio, per i social media.

Close

Come usare un font per il web di Google Fonts in WordPress?

Nella maggior parte dei casi è pre­fe­ri­bi­le ospitare au­to­no­ma­men­te i font per il web. Tuttavia, ci sono alcune eccezioni. Ad esempio, se volete soltanto spe­ri­men­ta­re un nuovo font su un sito in al­le­sti­men­to oppure se il sito in questione è un piccolo blog sul quale le pre­sta­zio­ni non sono poi così im­por­tan­ti. Qui di seguito vi mostriamo il pro­ce­di­men­to ne­ces­sa­rio così da avere una visione d’insieme.

Per ag­giun­ge­re un font da Google Fonts in WordPress seguite questi passaggi:

1. Cercate il font de­si­de­ra­to in Google Fonts ser­ven­do­vi della funzione di filtro e ricerca oppure scorrendo tra i vari font.
2. Scegliete tra le diverse varianti tenendo in con­si­de­ra­zio­ne che ogni tipo di carattere ag­giun­ti­vo causa il download di un ulteriore file di font.
3. Collocate il codice dei fogli di stile nell’header di WordPress come spiegato nel nostro tutorial su “Come mo­di­fi­ca­re un header su WordPress”.
4. Con­fi­gu­ra­te il font via CSS, per l’intero sito o per singoli elementi.

Close

Close

Close

Con quali metodi integrare un font per il web 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:

Come adattare un font in WordPress?

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:

Come si modifica la di­men­sio­ne del carattere 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:

h1 { font-size: 35px; }
h2 { font-size: 28px; }
h3 { font-size: 25px; }
h4 { font-size: 21px; }
h5 { font-size: 18px; }
h6 { font-size: 15px; }

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:

/* Dimensioni mobile-first */
html { font-size: 100%; }
/* 'medium' Breakpoint */
@media screen and (min-width: 30em) and (max-width: 60em) {
    html { font-size: 105%; }
}
/* 'large' Breakpoint */
@media screen and (min-width: 60em) {
    html { font-size: 110%; }
}

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”:

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: .875rem; }

Close

Come mo­di­fi­ca­re il colore del font in WordPress?

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:

body {
    color: black;
    color: #000000;
    color: #000;
    color: rgb(0, 0, 0)
}

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:

h1, h2, h3, h4, h5, h6 {
    color: #555555;
}

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:

<span style="color:#38a300" class="has-inline-color">I live in Los Angeles, have a great dog named Jack, and I like piña colada</span>

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:

function disable_gutenberg_custom_color_picker() {
    add_theme_support( 'disable-custom-colors' );
}
add_action( 'after_setup_theme', 'disable_gutenberg_custom_color_picker' );

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:

function disable_gutenberg_custom_color_palette() {
    add_theme_support( 'editor-color-palette' );
}
add_action( 'after_setup_theme', 'disable_gutenberg_custom_color_palette' );