Tips&Tricks: integrare un font in base64

by Giuseppe Lanzi on 5 maggio 2017

La personalizzazione grafica delle applicazioni è sempre un argomento interessante e parlando di app mobile ibride una delle prime cose che si può aver bisogno di cambiare è il font.

Ci sono diversi metodi per integrare un font custom nel proprio CSS, aggiungendo un nuovo font-face e potendo usare un carattere che non è installato sul dispositivo che fruisce l’app, ma uno che conoscono in pochi è uno dei più interessanti: la tecnica DataURI + base64.

In pratica invece di referenziare il file del font – il cui formato può essere il più vario: ttf, eof, woff, woff2 – tramite una URL assoluta o relativa, è possibile impostare nella proprietà src del font tutto un file in base64. Il CSS risultante è simile a questo:

@font-face {
    font-family: 'whosnext';
    src: url(data:application/font-woff2;charset=utf-8;base64,...)
}

Per ottenere il formato base64 del font è possibile appoggiarsi ad un servizio online, come il sito Font Squirrel suggerito nell’articolo del primo link.

È una tecnica facile e veloce, che permette di non preoccuparsi della raggiungibilità del file font da parte dell’installazione dell’app. E per di più è valida per i siti web oltre che per le app ibride, ho già usata anche su un blog che ho aperto qualche settimana fa.

Happy fonting 🙂

Leave a Comment

Previous post:

Next post: