Font-face che scompaiono in Chrome: soluzione

Questo spiacevole inconveniente, relativo alla scomparsa di font in Chrome, sta accadendo a molti web-developer, che si ritrovano a progettare siti e blog con innumerevoli difficoltà, a causa di questo che sembra essere un bug dell’ultima release di Chrome: la 33. Senza scendere in merito ai font-face, Google fonts e CSS, purtroppo mi sono imbattuto nello stesso problema per un blog di un mio amico, che dopo aver acquistato un tema premium per WordPress da Themeforest, si è ritrovato con i caratteri del blog completamente spariti!

Leggendo il forum ufficiale degli sviluppatori di Google Chrome all’issue 336476, si nota in effetti che la versione 33 di Chrome ha questo bug. In pratica se si lavora con le direttive font-face esterne al sito, i caratteri spariscono improvvisamente, a meno di un click sulla pagina o un refresh (F5) della stessa.

Il bug tuttora non è ancora risolto, tuttavia sembra che si stia lavorando per correggere tale comportamento del browser di casa Google. Fortunatamente, è stata segnalata una soluzione temporanea, che risolve il problema. In pratica si forza Chrome a renderizzare nuovamente i font, rendendoli quindi immediatamente visibili. Di seguito il codice CSS che dovrete aggiungere al vostro foglio di stile:

body{
-webkit-animation-duration: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0.1s;
}
@-webkit-keyframes fontfix{
from {opacity: 1;}
to {opacity: 1;}
}

Per quanto riguardava il nostro problema, i font scomparivano direttamente nel corpo del blog (quindi all’interno di body). Se invece a scomparire fosse stato ad esempio il footer, invece che body avremmo scritto footer, in accordo con il foglio di stile del tema che dovrete correggere.