Chrome per Android non visualizza correttamente i webfonts di Google

Question

Ho ricreato il problema che sto usando CSS font-family e Chrome per Android. Il browser Web non eredita correttamente i caratteri e, invece, utilizza il carattere di fallback.

http://jsbin.com/iyifah/1/edit

Questo sembra essere un bug già biglietto su Google (http://code.google.com/p/chromium/issues/detail?id=138257).

L'aggiunta di <meta name="viewport" content="width=device-width, initial-scale=1" /> all'HTML dovrebbe risolvere il problema, ma risolve solo il problema relativo al carattere impostato per il primo elemento.

Il collegamento del JS Bin aiuterà a spiegare di cosa sto parlando. Quindi, se qualcuno ha Chrome per Android, vai al link per vedere di cosa sto parlando!

Grazie.

Answer 1

mia soluzione al problema è quello di fosso Google webfonts completamente e, invece, scaricare i font al server web e li chiamano attraverso i CSS, in questo modo:

@font-face { 
    font-family: 'Droid Sans'; 
    src: url('fonts/DroidSans-webfont.eot'); 
    src: url('fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DroidSans-webfont.woff') format('woff'), 
     url('fonts/DroidSans-webfont.ttf') format('truetype'), 
     url('../fonts/DroidSans-webfont.svg#DroidSansRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

webfonts di Google sono open source, così abbiamo non dovrebbe avere problemi a trovare i download per i caratteri.

Questa soluzione funziona sia in Dolphin sia in Chrome per Android.

Answer 2

L'ho notato anche oggi. Non solo sul mio Nexus 7 (Android 4.2.2), ma anche su Chrome per MacOS X su MacBook Pro di un amico. Non è un grosso problema, dato che di solito scelgo di convertire i font di cui ho bisogno tramite fontsquirrel.com, ma per testare e prototipare l'integrazione dei caratteri direttamente da Google è molto più conveniente.