Fira Sans su Google Fonts e bug di rendering di IE11

Fira Sans è un bel font, infatti l’ho usato per un sito qualche tempo fa.

L’ho buttato nelle pagine tramite Google Fonts (fonts.googleapis.com) e tutto ha funzionato bene.

O meglio, ha funzionato perché non mi ero accorto che c’erano dei bug clamorosi e catastrofici.
Catastrofici del tipo che Firefox su Linux scarica il font e non mostra il testo.

Linux è Arch Linux. Nel dubbio ho provato Firefox su Ubuntu e lì tutto funziona. Quindi ho immediatamente tentato di incolpare qualche componente di Linux, poi Firefox, poi mi sono arreso all’evidenza: Fira Sans su Google Fonts è buggato.

Fira Sans su Google Fonts è buggato

A quanto pare è un fatto noto. Da 1 anno.
Su Google Code c’è un bug report da cui si evince che il problema affligge principalmente Firefox su Linux, ma è stato avvistato anche con Chrome e Chromium su Linux, mentre a un utente è successo pure su Windows.
Ora, Google Fonts è una delle CDN più utilizzate al mondo, probabilmente la più utilizzata per i font, e mi ritrovo questi bug in mezzo ai piedi, per caso, dopo un anno che ho costruito quel sito!? Per caso!
Se non controllavo, se non facevo una decina di ricerche su Google andando a scavare fino alla quarta pagina, non avrei mai saputo di questo bug, che impediva completamente ad alcuni utenti di utilizzare il sito!

E mentre scrivevo il post, Google Code è andato giù. Restituisce 502 Bad Gateway. Due ore prima andava.

Google. Per favore.
Errare è umano, ma questi non sono i primi mazzacani che passano per strada, è Google. Mi aspetto un po’ più di affidabilità.

Nel thread del bug report c’è un link a un altro bug report, dal quale si evince che:

  • Google sa del problema e qualcuno ci sta lavorando.
  • Sa che ci sta mettendo un tempo ridicolmente lungo a risolverlo.
  • Probabilmente la versione del font su Google Fonts è vecchia.
  • La versione ufficiale su Github è molto più recente e ha più caratteri, quindi pesa in media il doppio di quella su entrambe le CDN. In realtà usando Google Fonts avevo selezionato solo un subset dei caratteri, mentre la CDN Mozilla non lo lascia selezionare ma fa la stessa cosa, probabilmente.
    Bisogna riconoscere che in effetti la situazione è piuttosto contorta…

Ma sulla CDN Mozilla funziona (o quasi)

Cercando su internet, avevo trovato anche questa domanda su Stack Overflow: Strange Issue while Google Font Rendering.

La prima risposta suggerisce:

Try using Mozilla’s CDN instead of Google’s; the latter seems to be buggy with regards to the Fira Sans font.

e proviamo. La CDN Mozilla è consigliata anche dal readme di Fira Sans su Github e suggerita da alcuni nel bug report e il codice è questo:
link rel="stylesheet" href="//code.cdn.mozilla.net/fonts/fira.css"

Devo togliere i segni <> se no WordPress dopo un tempo imprecisato che ho pubblicato l’articolo cancella tutta la riga a tradimento.

Faccio F5 e tutto il testo appare magicamente.

Sarà che @font-face è sempre un terno al lotto e il rendering dei font è spesso diverso dal previsto da browser a browser e da OS a OS, sarà che Fira Sans è un font maledetto o ha di suo dei bug, sarà che praticamente nessuno usa Fira Sans e anche se lo usa probabilmente non va a controllare cosa succede con Firefox su Arch Linux, ma se il bug è noto da un anno e dalla CDN Mozilla funziona, ed è un bug catastrofico del tipo “non viene renderizzato il testo”, come faccio a fidarmi ad usare Google Fonts per progetti seri?

Piuttosto, se proprio voglio, uppo i file necessari sul sito: sarà più lento di una CDN e si rinuncia al caching “da un dominio all’altro”, ma almeno non ci sono bug assurdi e catastrofici in attesa di un fix da un anno.

Ora, finalmente, abbiamo finito? Tutto a posto?

Fira Sans non funziona su Internet Explorer 11

No, ma neanche per sogno: IE11 improvvisamente decide di renderizzare correttamente il font, ma lo renderizza più in alto di una decina di pixel dalla posizione prevista. Addirittura, se evidenzio il testo, il font è più in alto dello sfondo evidenziato!

Non so cosa succeda su IE precedente a 11 perché lì la grafica del sito è leggermente diversa e anche se il font è spostato a caso non si nota. Certo che IE sta invecchiando proprio male, oltre a quello fa una serie di altri piccoli errori di rendering… chissà come se la cava Edge, ma se tanto Microsoft non lo rilascia anche per Windows 7 e 8 non cambia molto, bisogna supportare IE11 in qualche modo.

Ho cercato selvaggiamente su Google e ho concluso che talvolta succede con @font-face, con i più disparati font e le più disparate combinazioni di OS e browser. Non c’è una soluzione in particolare.

Cioè ce ne sono alcune, ad esempio aggiungere un elemento span e fare una serie di manovre con gli inline-block e line-height, che mi rifiuto di provare perché non voglio aggiungere 200 span vuoti per fixare un bug di rendering che succede su un singolo browser; e la variante presente nei commenti di quel post, che suggerisce di usare :before o :after per fare le stesse cose. Solo che non funziona.

Alcuni dicono che il file .eot sia stato creato male o comunque sia l’unico dei file con questo problema, ma IE11 supporta anche i .woff: lo costringo a usare quelli, verifico che carica quelli, che sono gli stessi usati da Firefox e Chrome che renderizzando tutto perfettamente, e non cambia nulla.
Inoltre, ho verificato che Google Fonts Fornisce a IE9+ i .woff e basta, mentre a IE6-8 dà un .eot solo per la versione “normal” del font, nonostante gli venga esplicitamente richiesto anche il grassetto e il corsivo (italic), quindi non posso nemmeno tirare fuori quei .eot e vedere cosa succede su IE11. O meglio, potrei, ma non ha senso, il grassetto e il corsivo mi servono in tutte le pagine del sito!

Alcuni altri suggeriscono di creare i .eot o .woff usando un convertitore di font online, quale onlinefontconverter.com: carico il .otf di Fira Sans, che è quanto di più vicino ho trovato all’originale, e dopo 2 secondi netti di conversione mi dice Failed to convert FiraSans-Regular.otf.

E mi offre di scaricare un file JSON con i log d’errore: non è JSON, è una singola stringa che dice Unable to read the response. Che a quanto pare succede dopo 30 secondi se il font è pesante e non fa in tempo a generare il .woff o qualcosa del genere. Peccato che succeda dopo 2 secondi anche se non genero il .woff. Che eccellente pezzo di software, che tutti su internet consigliano schiumando da talmente è il miglior software nel suo genere. Ah, e non dice quali formati di input accetta, quindi magari non digerisce il .otf, chi lo sa…

Provo con un altro convertitore (ce ne sono una valanga) e viene fuori un .eot che ha lo stesso identico problema.

Per fugare ogni dubbio, ho riprovato con Google Fonts: sì, stesso bug.

Ora, o Fira Sans è buggato, o IE11 è buggato.

L’ultima spiaggia

Con le CDN non funziona, quindi provo a scaricare il font dalla fonte e… funziona.

Peccato che pesi esattamente il doppio che sulle CDN, tutti i tre .eot\.woff necessari complessivamente pesano 700-800 kB! Va bene che vanno scaricati solo la prima volta, ma i tempi di caricamento delle pagine potrebbero risentirne un tantino.

Quindi? Quindi si fa il CSS di Frankenstein:

@import url("https://code.cdn.mozilla.net/fonts/fira.css");

@font-face{
    font-family: 'Fira Sans';
    src: url('FiraSans-Regular.eot');
    src: local('Fira Sans Regular'), local('Fira Sans'), local('FiraSans-Regular'),
    url('FiraSans-Regular.eot') format('embedded-opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face{
    font-family: 'Fira Sans';
    src: url('FiraSans-Italic.eot');
    src: local('Fira Sans Regular Italic'), local('Fira Sans Bold'), local('FiraSans-Bold'),
    url('FiraSans-Italic.eot') format('embedded-opentype');
    font-weight: 400;
    font-style: italic;
}

@font-face{
    font-family: 'Fira Sans';
    src: url('FiraSans-Bold.eot');
    src: local('Fira Sans Bold'), local('Fira Sans Italic'), local('FiraSans-Italic'),
    url('FiraSans-Bold.eot') format('embedded-opentype');
    font-weight: 700;
    font-style: normal;
}

Motivazioni:

  1. La CDN Mozilla funziona, innanzitutto.
  2. E ha i file con un subset dei caratteri, file che pesano 80 invece che 170 kB.
  3. Nel repo ufficiale ci sono i woff2 ma sono con tutti i caratteri possibili e immaginabili e pesano ben più di 80 kB e nella CDN non ci sono, quindi li tralasciamo.
  4. .woff e .ttf vengono distribuiti dalla CDN, le regole qui sopra sovrascrivono solo i .eot. SPERO.
  5. IE11 preferisce i .eot anche se supporta i .woff.
  6. Il primo URL “local” lo usa la CDN Mozilla, gli altri due Google Font. Circa nessuno ha installato Fira Sans in locale, ma tentar non nuoce. Probabilmente quelli di Google Font sono per la vecchia versione del font, quindi se viene trovata in locale su IE è ancora buggata; e alcuni consigliano di non usare proprio local, quindi può essere il caso di eliminarli, vedete voi.
  7. I file .eot vengono scaricati dal sito e non dalla CDN, quindi vanno uppati di fianco al CSS. Vanno presi da qui: https://github.com/mozilla/Fira/tree/master/eot. Pesano il doppio dei corrispondenti .woff, ma almeno il rendering su IE è corretto.
  8. @import deve essere la prima regola del file altrimenti viene ignorata, credo. Beh, in ogni caso si può fare anche con l’elemento HTML link (vedi sopra).
  9. Volendo si possono distribuire anche i .woff e .ttf dal proprio sito, ma si perdono i vantaggi della CDN. Va beh che nessuno usa questo font quindi probabilmente l’utente non ce l’ha in cache, quindi non cambia molto.

La situazione è comunque in continua evoluzione, visto il duplice bug report aperto e la CDN Mozilla che non ha ancora l’ultimissima versione. Speriamo che si evolva in fretta e si possa eliminare questa pezza assurda.

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...