Come aggiungere font personalizzati su Cassiopeia

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.

ATTENZIONE
Se a causa delle leggi sulla privacy (come il GDPR), potresti non essere autorizzato a importare un font web, allora devi scegliere di caricare fisicamente sul tuo sito il font desiderato. Però va tenuto presente che il caricamento dei caratteri da una cartella locale potrebbe avere un impatto sulle prestazioni del tuo sito, quindi dovete valutare bene in base alle esigenze propri.

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
  • 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.googleapis.com/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.googleapis.com/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;
}

 

 

-------------------------------

https://www.tanase.it/come-aggiungere-font-personalizzati-su-cassiopeia