Continuando il tema spaziale, Cassiopeia è il template predefinito per Joomla 4, template basato su Bootstrap 5.
Questo template permette, tra le altre opzioni, di selezionare e di utilizzare dei font predefiniti attraverso Schema Caratteri. Però, se questi font non soddisfano le tue esigenze di design, puoi facilmente aggiungere nuovi font personalizzati seguendo questa guida.

Situazione esistente

Il template Cassiopeia fornito con Joomla 4 permette di configurare vari aspetti grafici e funzionalità tra cui l ascelta del carattere che si vuole utilizzarlo come predefinito sul sito.
Per accedere alle opzioni di configurazione di Cassiopeia si deve andare in :
Sistema > Stili Template Sito > "Cassiopeia - Default"

Qui, nella scheda "Avanzate" abbiamo un campo chiamato "Schema Caratteri" che ci permette di selezionare al-volo il carattere desiderato.
Dobbiamo fare una distinzione tra "Caratteri dalla cartella" (local) e "Caratteri dal Web" (web).

"Caratteri dalla cartella" significa che i font sono caricati fisicamente sul proprio server, invece i "Caratteri dal Web" sono i font richiamati da fonti esterne. Come "Caratteri dalla cartella" abbiamo Roboto, un font molto carino e leggibile e in teoria dovrebbe andar bene nella maggior parte dei siti.
Come "Caratteri dal Web" possiamo scegliere tra Fira Sans e la combinazione di Roboto + Noto Sans.

Passaggio preliminare

• Creare una nuova cartella chiamata "fonts" nella root del template Cassiopeia.
• Creare un file user.css nella cartella "css" del template (se questo non c'è già).

Caso 1 - Caricamento di un font da fonti esterne

Prendiamo in considerazione come esempio pratico Titillium Web, il font conosciuto e utilizzato soprattutto nei siti web della Pubblica Amministrazione.

• Andare su Google Fonts (opens in a new tab)
• Inserire nella casella di ricerca Titillium per avviare la ricerca;
• Scegliere i stili del font desiderati cliccando su "Select this style";
• Nel riquadro "Use on the web" Selezionare la casella @import
• Copiare il codice presente tra i tag <style> e </style>
• Aprire il file user.css e inserire il codice all'inizio

@import url('https://fonts.e10f949fcaacdb195442bfb5062d59de-gdprlock/css2?family=Titillium+Web:wght@400;600&;display=swap');

Specificare dove si desidera utilizzare il font, in questo caso vogliamo utilizzarlo dappertutto quindi aggiungiamo in user.css anche:

:root{
--cassiopeia-font-family-body: "Titillium Web", sans-serif;}

Clicca su Salva.
Per utilizzarlo anche nei titoli, Il codice completto dovrebbe essere così:

@import url('https://fonts.e10f949fcaacdb195442bfb5062d59de-gdprlock/css2?family=Titillium+Web:wght@400;600&;display=swap');
:root { 
 --cassiopeia-font-family-body: "Titillium Web", sans-serif; 
 --cassiopeia-font-family-headings: "Titillium Web", sans-serif; 
 --cassiopeia-font-weight-headings: 600; 
 --cassiopeia-font-weight-normal: 400; 
}

Caso 2 - Caricamento di un font da una cartella locale

Nel secondo caso prendiamo in considerazione di utilizzare un'altro font, tipo "Lato".

• Andare su Google Webfonts Helper (opens in a new tab)
• Inserire nella casella di ricerca Lato e scegliere il font;
• Scegliere i stili del font desiderati;
• Nella casella "Customize folder prefix (optional)" inserire il nome della cartella dove caricare i file. Per questo esempio inserire ../fonts/.
• Copiare il codice e inserirlo nel file user.css:

/* lato-regular - latin */
@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: url('../cartella/lato-v20-latin-regular.eot'); /* IE9 Compat Modes */
 src: local(''),
 url('../cartella/lato-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('../cartella/lato-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
 url('../cartella/lato-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
 url('../cartella/lato-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
 url('../cartella/lato-v20-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

• Scarica il font cliccando su "download"
• Scompatta tutti i file scaricati nella cartella "fonts" del template.
• Aggiungere nel file user.css il seguente codice:

:root{
 --cassiopeia-font-family-body: 'Lato', sans-serif;
}

Ed e tutto!

Adesso avete due modalità di inserire font alternativi e utilizzarli nel template Cassiopeia.
In questo modo rendete il vostro template "fresco" e più giovane.