Come caricare font locali nel template

Ci sono 2 modalità per aggiungere font locali in un template Gantry :
1. La prima modalità permette di aggiunge il nuovo tipo di font locale allo strumento Font Picker, permettendo così di impostare il tipo di font per un'area specifica tramite pannello di amministrazione Gantry.
2. Con la seconda modalità, il font verrà impostato attivo a livello globale del tema. Il che significa che consente di utilizzare il nuovo font all'interno del template, ma non sarà disponibile nello strumento Font Picker. Tuttavia è possibile combinare i due metodi per avere il font disponibile per entrambi, modificando il file theme.yaml e apportando delle modifiche al file custom.scss.

Aggiungere un nuovo font allo strumento Font Picker

Se volete che il vostro nuovo tipo di font sia accessibile con lo strumento Font Picker, è necessario fare una modifica al file theme.yaml per aggiungere il tipo di font e per impostare le variazioni di grandezza.

Ecco i passaggi da fare per realizzare questo:
1. Creare una nuova cartella caviardreams all'interno di TEMPLATE_DIR/custom/fonts/
2. Scompattare l'archivio Caviar-Dreams-fontfacekit.zip. All'interno troverete altre 4 sottocartelle denominate in base all'aspetto dello font (regular, italic, bold,...).
3. Aggiungere solamente i file con l'estensione eot, svg, ttf e woff nella cartella TEMPLATE_DIR/custom/fonts/caviardreams/ direttamente nella root.
2. Fatevi fare una copia del file theme.yaml (TEMPLATE_DIR/gantry/theme.yaml) e tenetela in un posto sicuro in quanto questo file verrà sovrascritto ad ogni aggiornamento di gantry.
3. Aprite quindi il file theme.yaml con un editor di testo.

Trovate questo codice:{code lang:yaml showtitle:false}fonts:

    roboto:
      400: 'gantry-theme://fonts/roboto_regular_macroman/Roboto-Regular-webfont'
      500: 'gantry-theme://fonts/roboto_medium_macroman/Roboto-Medium-webfont'
      700: 'gantry-theme://fonts/roboto_bold_macroman/Roboto-Bold-webfont'{/code}
Aggiungete subito dopo le seguenti righe:{code lang:yaml showtitle:false}    caviardreams:
      400: 'gantry-theme://fonts/caviardreams/caviardreams/caviardreams-webfont'
      400italic: 'gantry-theme://fonts/caviardreams/caviardreams_italic/caviardreams_italic-webfont'
      700: 'gantry-theme://fonts/caviardreams/caviardreams_bold/caviardreams_bold-webfont'
      700italic: 'gantry-theme://fonts/caviardreams/caviardreams_bolditalic/caviardreams_bolditalic-webfont'{/code}
Quindi alla fine, il codice diventerà così:{code lang:yaml showtitle:false}fonts:
    roboto:
      400: 'gantry-theme://fonts/roboto_regular_macroman/Roboto-Regular-webfont'
      500: 'gantry-theme://fonts/roboto_medium_macroman/Roboto-Medium-webfont'
      700: 'gantry-theme://fonts/roboto_bold_macroman/Roboto-Bold-webfont'
    caviardreams:
      400: 'gantry-theme://fonts/caviardreams/caviardreams/caviardreams-webfont'
      400italic: 'gantry-theme://fonts/caviardreams/caviardreams_italic/caviardreams_italic-webfont'
      700: 'gantry-theme://fonts/caviardreams/caviardreams_bold/caviardreams_bold-webfont'
      700italic: 'gantry-theme://fonts/caviardreams/caviardreams_bolditalic/caviardreams_bolditalic-webfont'{/code}
I numeri che stanno davanti si riferiscono allo stile del font. (Es. 400 sta per font normale, 400italic sta per font normale corsivo, 700 è grassetto e così via).
Adesso il nuovo font verrà visualizzato così:

PRIMA

DOPO

Aggiungere un nuovo font al livello globale del tema

Se volete caricare i font locali in tutto il sito, lo potete fare completando questi semplici passaggi:
- Aggiungere il font locale nella cartella TEMPLATE_DIR/custom/fonts (vedi il passaggio precedente);
- Aggiungere il riferimento nel file custom.scss{code lang:css showtitle:false}@import "dependencies";
@include import-font('caviardreams');{/code}
Ecco qui un significato ai numeri nel file theme.yaml, numeri che si riferiscono alla variazione del font.

Esempio pratico di utilizzo del font

a) Caricare il font sul sito (Seguire passi 1, 2 e 3 di Aggiungere un nuovo font allo strumento Font Picker)
b) Inserire nel custom.scss il seguente codice css :{code lang:yaml showtitle:false}@include font-face('caviardreams', 'gantry-theme://fonts/caviardreams/caviardreams/caviardreams-webfont');
@include font-face('caviardreams_italic', 'gantry-theme://fonts/caviardreams/caviardreams_italic/caviardreams_italic-webfont');
@include font-face('caviardreams_bold', 'gantry-theme://fonts/caviardreams/caviardreams_bold/caviardreams_bold-webfont');
@include font-face('caviardreams_bolditalic', 'gantry-theme://fonts/caviardreams/caviardreams_bolditalic/caviardreams_bolditalic-webfont');

@font-face {
    font-family: 'caviardreams';
    src: url('../caviardreams/caviardreams-webfont.eot');
    src: url('../caviardreams/caviardreams-webfont.eot?#iefix') format('embedded-opentype'),
         url('../caviardreams/caviardreams-webfont.woff') format('woff'),
         url('../caviardreams/caviardreams-webfont.ttf') format('truetype'),
         url('../caviardreams/caviardreams-webfont.svg#caviardreams') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'caviardreams_italic';
    src: url('../caviardreams_italic/caviardreams_italic-webfont.eot');
    src: url('../caviardreams_italic/caviardreams_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../caviardreams_italic/caviardreams_italic-webfont.woff') format('woff'),
         url('../caviardreams_italic/caviardreams_italic-webfont.ttf') format('truetype'),
         url('../caviardreams_italic/caviardreams_italic-webfont.svg#caviardreams_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'caviardreams_bold';
    src: url('../caviardreams_bold/caviardreams_bold-webfont.eot');
    src: url('../caviardreams_bold/caviardreams_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../caviardreams_bold/caviardreams_bold-webfont.woff') format('woff'),
         url('../caviardreams_bold/caviardreams_bold-webfont.ttf') format('truetype'),
         url('../caviardreams_bold/caviardreams_bold-webfont.svg#caviardreams_bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'caviardreams_bolditalic';
    src: url('../caviardreams_bolditalic/caviardreams_bolditalic-webfont.eot');
    src: url('../caviardreams_bolditalic/caviardreams_bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../caviardreams_bolditalic/caviardreams_bolditalic-webfont.woff') format('woff'),
         url('../caviardreams_bolditalic/caviardreams_bolditalic-webfont.ttf') format('truetype'),
         url('../caviardreams_bolditalic/caviardreams_bolditalic-webfont.svg#caviardreams_bolditalic') format('svg');
    font-weight: normal;
    font-style: normal;
}{/code}
c) Creare una classe CSS personalizzata (per comodità si consiglia di utilizzare il nome del font da utilizzare), ad esempio:{code lang:css showtitle:false}.caviardreams_bolditalic{
  font-family: 'caviardreams_bolditalic',sans-serif;
  color:#f00;
  text-shadow:0 -1px 1px #fff;
}{/code}
d) Utilizzo pratico
-> Andiamo in Componenti > Gantry 5 Themes > Default Theme
-> Cambiamo da Base Outline a Home
-> Andiamo nella scheda Layout

-> Cliccare sull'icona delle Impostazioni della particella Gantry 5 della sezione Showcase

-> inserire nel campo Headline il seguente codice:

<span class="caviardreams_bolditalic">Disponibile Gantry 5.1.13 !</span>

-> Apply & Save;

Ed ecco il risultato

Se volete utilizzare una classe personalizzata nello stesso posto di una certa particella, che dovrebbe comparire su tutte le istanze, potete inserire il codice css direttamente nel file twig della particella stessa, ad esempio:{code lang:twig showtitle:false}{% if particle.headline %}<h1 class="caviardreams_bolditalic">{{ particle.headline|raw }}</h1>{% endif %}{/code}.

Buon Gantry !