La gestione dei fonts

Nella vita di un programmatore web specialmente se si occupa di frontend sarà più volte capitato di imbattersi nelle giornate più buie ne ‘La gestione dei fonts’ che a prima occhiata sembra essere una banalità aggiungere un font alla nostra web application indipendentemente dallo strato di presentation eppure vi dirò che ho conosciuto molte problematiche dovute proprio allo sconosciuto mondo dei fonts.

La gestione dei fonts spazia su tre punti centrali: licenza, performance e supporto dei browser, questi tre parametri a grandi linea definiscono la corretta inclusione dei fonts nelle moderne web-application.

Inserisci font web application

La gestione dei fonts

1.LA LICENZA
Supponiamo a caso di voler aggiungere il font Montserrat (font che mi piace molto, che uso anche per il mio blog) 🙂
Questo font è gratuito Okay, andiamo su Google Fonts lo cerchiamo e ci dice di aggiungere nella sezione della nostra pagina alternativamente

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

oppure

<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat');
</style>

Ma cosa sarebbe successo se non lo avessimo trovato su Google Fonts? 😉 Vuol dire che la licenza di questo font non è gratuita? Beh ovvio, allora dobbiamo pagare per averlo.
Invece non è così ovvio! Prendiamo ad esempio un font a caso chiamato ‘Sharik’ che non c’è su Google Fonts ma esiste su questo sito: https://www.dafont.com/it/sharik.font.

Font di esempio

Sharik Font


Come vediamo nell’immagine appena sopra, dice che per un uso commerciale bisogna andare su http://infinitismo.wixsite.com/infinitismo e ottenere il consenso dell’autore per poterlo utilizzare in una applicazione commerciale.
Questa è solo una possibili condizioni ce ne sono di diverse, ma noi programmatori non disperiamo facile e non vogliamo mai cacciare un centesimo potremmo infatti essere spinti a cercare altrove una licenza gratuita e quì lo sbaglio è dietro l’angolo 🙂
Perché potremmo imbattersi in siti come questo (per carità sito utilissimo a chi sa come utilizzarlo) ma non per voi perché vi permette di scaricare il font (loro hanno la licenza di distribuzione) ma non la cedono semplicemente perché scarichi il font da loro e non da Google 🙂 Quindi tu se scarichi da loro ‘Sharik’ a questo link e lo metti nella tua applicazione potresti andare incontro a delle sanzioni in quanto non ne possiedi la licenza.

2.LE PERFORMANCE
Tornando a Montserrat se visitiamo il link suggerito da Google ci invita ad aggiungere 5 font-face (tra l’altro non pienamente supportati ma lo vedremo dopo) per un solo font 🙂 🙂 Sapete che vuol dire che bisogna caricare 5 file per aver un font.
E poi ci si lamenta dei tempi di risposta delle pagine web i quali aumentano, ma è logico!!!
Pertanto che consigli posso darvi per le performance:

  • Aggiungiamo le risorse in maniera statica nella nostra applicazione, non deleghiamo la gestione dei fonts ai CDN anche se sono di Google, le performance decandono si sta pur sempre richiedono delle risorse esterne.
  • Cerchiamo inoltre di aggiungere meno risorse possibili cercando di rispettare la compatibilità prefissata dalla nostra applicazione per i web browser. Nel punto successivo vi farò un esempio concreto.

3.IL SUPPORTO DEI BROWSER
E qui non credete ma si apre un piccolo mondo. I files dei fonts possono essere:

  • OTF -> OpenType Fonts
  • TTF -> TrueType Fonts
  • WOFF -> The Web Open Font Format
  • WOFF 2.0 -> The Web Open Font Format, evoluzione del WOFF che garantisce miglior compressione e rapidità
  • SVG -> Scalable Vector Graphics
  • EOT -> Embedded OpenType Fonts

Ora di solito nelle web application si fissa un limite di browser che possono supportare i nostri font ad esempio il formato EOT che pure essendo uno dei più rapidi nel rendering è supportato solo da Edge, quindi se la nostra applicazione è pensata solo per Edge ha senso usarlo, ma se non è pensata solo per Edge, ha senso utilizzarlo e dover perdere del tempo computazionale per caricarla? A voi la risposta!
Ma continuiamo qui di seguito riporto le compatibilità delle varie tipologie di fonts con i browser, e la versione dalla quale è supportata. Tabella presa da questa fonte.

Font format Edge Chrome Firefox Safari Opera
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 Not supported 36.0 35.0* Not supported 26.0
SVG Not supported 4.0 Not supported 3.2 9.0
EOT 6.0 Not supported Not supported Not supported Not supported

Come vedete vi sono varie discrepanze motivo per cui potreste essere decisi ad inserire solo il woff tra i vostri fonts strategia plausibile che ho anche seguito con successo, però vi segnalo anche il fatto che il woff è un po lentino da renderizzare quindi se vi aspettate che il rendering dei fonts sia fondamentale ancor più dei tempi di caricamento delle pagine potreste adottare una strategia ibrida che permette di preferire i woff2 ai woff sui browser che lo supportano inserendo il fallback per i browser che non supportano WOFF2 ossia Edge e Safari, in questa maniera.

@font-face {
  font-family: 'XXX';
  font-style: normal;
  font-weight: 400;
  src: local('XXX'), local('XXX-Regular'),
       url(../../fonts/woff2/xxx.woff2) format('woff2'),
       url(../../fonts/woff/xxx.woff) format('woff');
}

Per una copertura completa e miglior rendering a discapito di performance potete aggiungere anche gli EOT(Edge) e gli SVG(Safari) a preferenza dei WOFF usati come quarto fallback.
Ma aggiungere anche i TTF e gli OTF lo trovo a dir poco inutile per la causa.

So di essere un rompipalle ma vi voglio fornire uno spunto di riflessione per i quale rivalutare i TFF 🙂
Supponiamo che la nostra web application realizzi anche un PDF, in tal caso quasi la maggior parte delle librerie Java,PHP ecc permettono di scrivere su tali file solo per un set predefinito di font basici (Helvetica, Arial e qualcun altro) se vogliamo scrivere sul PDF con Montserrat dobbiamo includere nella nostra applicazione anche o i TTF o gli EOT che sono anche quelli che in genere usano Word e programmi per PC in tal caso vi consiglio di inserire i TTF perché sono editabili a differenza degli OTF può capitare non ci crederete ma è vero che manchi uno specifico carattere e sareste costretti voi a doverlo disegnare o doverne modificarne il line height, ec…, assurdo.

Il mio consiglio finale su la gestione dei fonts è quindi quello di avere un proprio file di font-faces preferendo di gran lunga l’embedding da Google il quale è soggetto a variazioni e se poi non soddisfa la nostra copertura come ad esempio per i WOFF2 di Montserrat che abbiamo visto essere non supportato da Edge ai voglia a capire perché il font su Edge non funziona anche se ho usato il CDN di Google! 😉

La gestione dei fonts ultima modidfica: 2018-01-28T19:58:16+01:00 da Gianluca Di Vincenzo
Posted in: CSS

By on 28 Gennaio 2018

Tagged: , , , , , , ,