La finestra Aggiungi Web Font, richiamata cliccando sul pulsante Aggiungi presente nella finestra Web Font, presenta le opzioni necessarie per aggiungere un nuovo Web Font alla lista di quelli utilizzabili nel Progetto.
La finestra presenta due sezioni:
Per scegliere il Google Font da aggiungere al Progetto è possibile utilizzare:
| ▪ | Un campo per effettuare la ricerca in base al nome del font. |
| ▪ | I comandi per ordinare i font in base a criteri come il livello di popolarità la data di inserimento o il numero di stili disponibili. |
| ▪ | Le opzioni per specificare quali categorie devono essere previste: Serif, Sans Serif, Display, Handwriting, Monospace. |
| ▪ | Il testo e le dimensioni che devono essere utilizzati per visualizzare l'anteprima del font. |
|
Nel caso dei Google Font, i file relativi ai font sono disponibili sui server di Google e vengono semplicemente richiamati nei fogli di stile delle Pagine del Sito.
WebSite X5 scarica automaticamente i file TTF dei Google Font integrati nei Progetti per poterli visualizzare in locale.
|
|
Per prima cosa occorre scegliere quale tecnica utilizzare per integrare i Web Font:
| ▪ | Online Web Font: i file relativi ai font sono disponibili sui server del servizio che offre i font e vengono semplicemente richiamati nei fogli di stile delle Pagine del Sito. |
| ▪ | Offline Web Font: i file relativi ai font sono presenti sul computer locale e vengono pubblicati sul proprio server Web. |
Sia che si scelga di utilizzare un Web Font online che si decida di integrare un Web Font Offline, è necessario importare:
| ▪ | File TTF per la visualizzazione in locale: è il file in formato TrueType (TTF) necessario per poter visualizzare il font localmente. In questo modo WebSite X5 può utilizzare il font come se fosse installato nel Sistema Operativo del Computer e proporlo nell'editor di testo e, più in generale, in tutti i punti in cui è possibile impostare il tipo di font da utilizzare per un testo. |
Nel caso di un Web Font online, inoltre, è necessario specificare:
| ▪ | Codice @import: è il codice, fornito direttamente dal servizio che offre i font, che serve per collegare il font nel Foglio di Stile (CSS) delle Pagine del Sito. |
Nel caso, invece, di un Web Font Offline è consigliabile importare anche:
| ▪ | File WOFF (consigliato): è il file in formato WOFF relativo al font. Questo tipo di formato è supportato da Internet Explorer, Mozilla Firefox e Google Chrome. |
| ▪ | File SVG (iPhone/iPad): è il file in formato SVG relativo al font. Questo tipo di formato è supportato da Mozilla Firefox, Safari, Google Chrome e Opera. |
| ▪ | File EOT (solo IE): è il file in formato EOT relativo al font. Questo tipo di formato è supportato solo da Internet Explorer. |
|
Nel caso dei Web Font Offline, i file relativi ai font sono presenti sul computer locale e vengono pubblicati sul server Web insieme alle Pagine del Sito.
Dato che il supporto dei Web Font sui principali Browser non è omogeneo, è consigliabile importare non solo il file TTF (obbligatorio) ma anche i file WOFF, SVG e EOT relativi al font che si vuole utilizzare.
|
|
Best practice:
Approfondimenti:
