@ font-face che non funziona nel webkit mobile

Question

Ho problemi a far funzionare @font-face in qualsiasi browser Webkit che ho provato: Safari su un iPhone 3GS, il browser Android 2.2 predefinito e il browser Dolphin su Android.

Funziona in tutti i browser desktop, da IE7 a IE9, FF3.5, Safari 4 e Opera.

I font e CSS sono da FontSquirrel:

@font-face { 
    font-family: 'LeagueGothicRegular'; 
    src: url('../fonts/League_Gothic-webfont.eot'); 
    src: local('☺'), 
     url('../fonts/League_Gothic-webfont.woff') format('woff'), 
     url('../fonts/League_Gothic-webfont.ttf') format('truetype'), 
     url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'LatinModernRoman10Bold'; 
    src: url('../fonts/lmroman10-bold-webfont.eot'); 
    src: local('☺'), 
     url('../fonts/lmroman10-bold-webfont.woff') format('woff'), 
     url('../fonts/lmroman10-bold-webfont.ttf') format('truetype'), 
     url('../fonts/lmroman10-bold-webfont.svg#webfonthCDr6KZk') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'LatinModernRoman10BoldItalic'; 
    src: url('../fonts/lmroman10-bolditalic-webfont.eot'); 
    src: local('☺'), 
     url('../fonts/lmroman10-bolditalic-webfont.woff') format('woff'), 
     url('../fonts/lmroman10-bolditalic-webfont.ttf') format('truetype'), 
     url('../fonts/lmroman10-bolditalic-webfont.svg#webfontegrLi3sm') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Ho controllato lo SVG ID in origine font SVG, e tutti match up.

Potrebbe essere perché ho alcune regole lettera-spaziatura più avanti nel CSS?

Grazie!

Answer 1

Come si è visto, la sintassi era sbagliata. Mi sono imbattuto in questa soluzione via twitter:

http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

Ha funzionato perfettamente. Appena controllato in tutti i principali browser, e i miei caratteri appaiono, anche su Android e iOS.

Ora, il mio CSS si legge in questo modo:

@font-face { 
    font-family: 'LeagueGothicRegular'; 
    src: url('../fonts/League_Gothic-webfont.eot#') format('eot'), 
     url('../fonts/League_Gothic-webfont.woff') format('woff'), 
     url('../fonts/League_Gothic-webfont.ttf') format('truetype'), 
     url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'LatinModernRoman10Bold'; 
    src: url('../fonts/lmroman10-bold-webfont.eot#') format('eot'), 
     url('../fonts/lmroman10-bold-webfont.woff') format('woff'), 
     url('../fonts/lmroman10-bold-webfont.ttf') format('truetype'), 
     url('../fonts/lmroman10-bold-webfont.svg#webfonthCDr6KZk') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'LatinModernRoman10BoldItalic'; 
    src: url('../fonts/lmroman10-bolditalic-webfont.eot#') format('eot'), 
     url('../fonts/lmroman10-bolditalic-webfont.woff') format('woff'), 
     url('../fonts/lmroman10-bolditalic-webfont.ttf') format('truetype'), 
     url('../fonts/lmroman10-bolditalic-webfont.svg#webfontegrLi3sm') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Sono contento di sapere che c'è una soluzione migliore di proiettile là fuori che l'hack dang smileyface.

Spero che questo aiuti qualcuno!

Answer 2

Secondo http://caniuse.com/woff, Android 2.3, 4, 4.1, 4.2 e 4.3 non supportano i caratteri WOFF. Quindi devi aggiungere anche ttf. Sto testando su Android 4.1 e 4.2 e il woff sembrava essere ok! Ma su 4.0.3, ho dovuto aggiungere i font TFF.

Vedi questo link http://sanchez.org.ph/use-host-and-download-google-fonts-on-your-own-website/ per vedere come scaricare i font TTF da Google.