Per far apparire le applicazioni Xojo Web più moderne è possibile utilizzare i Web Font. Google offre un’ampia scelta di font. Vediamo come poterli utilizzare in modo efficiente.
I Font di Google sono centinaia e una volta fatta la scelta per il nostro font (diciamo che è meglio non esagerare nel numero per non rendere pacchiana la pagina) rimane il problema di renderli disponibili alla nostra applicazione Xojo Web.
In realtà è molto semplice. Una volta scelto il font Google fornisce i codice HTML da aggiungere alla pagina e come chiamare il font nelle nostre classi.
Se ad esempio abbiamo scelto il font Bubbler One avremo come suggerimento per l’HTML:
<link href="https://fonts.googleapis.com/css?family=Bubbler+One" rel="stylesheet"> |
e come suggerimento per il CSS:
font-family: 'Bubbler One', sans-serif; |
Cosa scrivere in Xojo
Creiamo un WebStyle con il nome del font, nel nostro caso BubblerOne e con la la font-family impostata a sans-serif.
Possiamo anche creare delle sottoclassi per le varianti del font, ad esempio BubblerOneBoldBlue un nome che riflette le caratteristiche aggiuntive ovvero grassetto e testo di colore blue.
Ora possiamo assegnare questo stile agli oggetti nel nostro progetto Xojo e vedere nell’editor il font standard ma nel browser sarà utilizzato un font sans-serif.
Modificare l’intestazione
Per poter utilizzare il font di Google basta ora modificare l’intestazione. Per fare questo selezioniamo l’oggetto App nell’IDE e nel navigator editiamo l’HTML header aggiungendo il frammento di HTML suggerito da Google seguito dallo modifica del nostro WebStyle:
<link href="https://fonts.googleapis.com/css?family=Bubbler+One" rel="stylesheet"> <style> //Lo stile da aggiungere </style> |
Dove lo stile da aggiungere è:
*[class*="BubblerOne"] {font-family:'Bubbler One', sans-serif !important} |
A questo punto il font viene visualizzato in tutti i controlli che hanno il nome dello style che contiene BubblerOne (questo è il significato del css scritto), permettendoci quindi di avere tutte le varianti che vogliamo, come l’esempio del BubblerOneBoldBlue.
Chiaramente bisogna ricordarsi che questi font sono visibili solo sul browser con un collegamento ad internet attivo, in quanto vengono scaricati dai veloci server di Google.