• 0
Close
Close

Come installare font personalizzati nel tema Astra (versione free)

Wordpress

Astra (versione free) è uno dei temi WordPress più leggeri e flessibili, anche se non ancora Full Site Editing (FSE), e forse pe questo più veloci da usare, ma nella sua versione gratuita non include un sistema diretto per caricare font personalizzati.

Fortunatamente il team di Brainstorm Force (gli stessi sviluppatori di Astra) ha realizzato un plugin gratuito chiamato Custom Fonts che ci permette di aggiungere (abbastanza) facilmente qualsiasi font personalizzato al sito, anche senza usare Google Fonts.

Di fatto, molti font di alta qualità non sono presenti nella libreria di Google Fonts. Caricarli direttamente sul proprio sito può risultare utile per almeno due importanti motivi.

Privacy: evitando di caricare i font dai server di terze parti, si riduce la raccolta di dati degli utenti da parte di provider esterni (Google), contribuendo a rispettare meglio la normativa sulla privacy (ad esempio il GDPR).

Velocità di caricamento: ospitare i font localmente riduce le richieste esterne al server di Google, migliorando i tempi di caricamento delle pagine, soprattutto per gli utenti con connessioni lente o in paesi lontani dai server di Google.

In questo articolo ti mostro passo passo come fare.

Installa il plugin Custom Fonts

  1. Accedi alla Bacheca di WordPress.
  2. Vai su Plugin → Aggiungi nuovo.
  3. Cerca “Custom Fonts” sviluppato da Brainstorm Force.
  4. Clicca su Installa ora, poi su Attiva.

Una volta attivato, troverai la nuova voce Aspetto → Custom Fonts

Il plugin consente sia di importare i font dalla libreria di Google, sia di caricare font direttamente dal proprio computer. Questo articolo è dedicato a chi desidera utilizzare quest’ultima opzione.

E perciò parliamo dei font da caricare sul proprio computer. I formati web più comuni sono .woff oppure .woff2 (formato consigliato). Il formato .woff2 è un formato compresso per l’uso su siti web. Il nome deriva da WOFF (Web Open Font Format) ma, rispetto al .woff, offre una compressione ancora più efficiente, riducendo la dimensione dei file fino al 30% in meno ed è supportato praticamente da tutti i browser moderni (Chrome, Firefox, Edge, Safari).

Carica i font con Custom Fonts

  1. Vai su Aspetto → Custom Fonts.
  2. Clicca su Aggiungi nuovo.
  3. Inserisci il nome del font (es. “Montserrat Alternativo”).
  4. Carica i file dei font direttamente dalla libreria media o caricali dal tuo computer.
  5. Clicca su Pubblica.

Ora il tuo nuovo font è registrato e disponibile nel tema.

Ci può essere però un intoppo perché WordPress non permette di caricare file tipo .woff o .woff2 nella libreria media. Per bypassare questo ostacolo basta un piccolo accorgimento.

Incolliamo il seguente codice in Aspetto > Editor del tema > File del tema > functions.php 

/**
 * Import Woff Fonts
 */
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
    $filetype = wp_check_filetype( $filename, $mimes );
    return [
        'ext'             => $filetype['ext'],
        'type'            => $filetype['type'],
        'proper_filename' => $data['proper_filename']
    ];
}, 10, 4 );

Si suggerisce di usare un tema figlio per Astra; se non hai usato un tema figlio (opzione suggerita sempre) puoi usare un plugin come WPCode.

Se usi un tema Astra Child, incolla il codice qui:

Una volta caricato il font (ed eventualmente le sue varianti) in Custom Fonts, esso sarà disponibile per essere usato in Astra > Personalizza > Globale > Tipografia > Font del contenuto o Font dell’intestazione oppure nei vari h1, h2, ecc.

Vedi come impostare uno sticky header avanzato in Astra Free.

Tags: