@ font-face non embedding su mobile Safari (iPhone/iPad)

Question

Sto incorporando i caratteri su un sito Web mobile utilizzando @font-face (css da FontSquirrel). Quando visualizzo l'anteprima in Safari desktop o Chrome, i caratteri incorporano bene, ma non compaiono in Safari mobile su iPhone/iPad. Non ricevo errori e non riesco a capire cosa non va. Ecco il mio CSS. Qualche idea?

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

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

Answer 1

Il carattere non è supportato su MobileSafari fino a iOS 4.2.

Answer 2

OK, ho capito e documenterò per chiunque abbia questo problema in futuro. Avevo copiato il CSS da Font Squirrel e poi avevo avuto bisogno di riscaricare i file di font effettivi in ​​seguito. Non pensavo che avrebbe cambiato nulla nel CSS, ma risulta che i font SVG (che sono usati da mobile safari) hanno tutti un ID a cui si fa riferimento nel file dei font e nel CSS.

Così, in:

url('../fonts/jotting_regular-webfont.svg#webfonttEfFltbI') format('svg') 

webfonttEfFltbI è il tipo di carattere id. Ho aperto il file di font SVG in un editor di testo e ho trovato il nuovo ID nella seguente riga vicino alla parte superiore del file:

<font id="webfontC6xdxB57" horiz-adv-x="972" > 

Sostituzione della id dopo il tag hash nel CSS risolto il problema.

Answer 3

Questo è già stato risolto, ma ho avuto un problema simile qui:

@font-face not working in mobile Webkit

Per me, tutti gli ID sui font SVG erano corrette; era la sintassi di FontSquirrel che era stupefacente. L'utilizzo della sintassi bulletproof di FontSpring aggiornata ha risolto il problema per me e sembra funzionare interamente su browser.

Answer 4

La faccia del carattere funziona su Safari mobile, sto usando su iphone 3. Ho anche copiato il codice da font squirl ma non ha funzionato. Ecco il codice aggiornato. Usa questo e funzionerà ovunque.

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

Answer 5

Stavo avendo la stessa situazione. Ho risolto il problema aggiornando i percorsi al font. Anche se Chrome & Safari stavano caricando loro bene, iOS non è stato riconoscendo il mio percorso che era

url ('font/chunkfive/font.eot') 

ho cambiato quella linea di includere un / per l'inizio del percorso del font e che tutto fisso.

url ('/font/chunkfive/font.eot') 

Si potrebbe anche provare a utilizzare un percorso assoluto.

Answer 6

Ho lavorato con questo per un'ora prima di realizzare il mio stupido errore.

Mobile Safari è CASE SENSIBILE per i caratteri, mentre Desktop Safari non lo è.

Se il carattere è intitolato: font.svg, è necessario aggiungerlo esattamente come è. Se lo aggiungi a Capital F, Desktop Safari non si preoccuperà, ma lo farà il cellulare.