@ font-face no incrustado en el dispositivo móvil Safari (iPhone/iPad)

Question

Estoy incorporando fuentes en un sitio web móvil usando @font-face (css de FontSquirrel). Cuando hago una vista previa en el escritorio de Safari o Chrome, las fuentes se incrustan bien, pero no aparecen en Safari móvil en el iPhone/iPad. No recibo ningún error y no puedo entender qué está pasando mal. Aquí está mi CSS. ¿Algunas ideas?

@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

La fuente de la fuente no es compatible con MobileSafari hasta iOS 4.2.

Answer 2

OK, lo descubrí y documentaré para cualquier persona que tenga este problema en el futuro. Copié el CSS de Font Squirrel y luego tuve que volver a descargar los archivos de fuentes reales más adelante. No pensé que eso cambiaría nada en el CSS, pero resulta que las fuentes SVG (que se usan en el safari móvil) tienen una ID a la que se hace referencia en el archivo de fuente y el CSS.

Así, en:

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

webfonttEfFltbI es la identificación de la fuente. Abrí el archivo de fuentes SVG en un editor de texto y encontré el nuevo ID en la siguiente línea cerca de la parte superior del archivo:

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

Sustitución del ID después de la etiqueta de hash en el CSS solucionado el problema.

Answer 3

Esto ya ha sido resuelto, pero tuve un problema similar aquí:

@font-face not working in mobile Webkit

Para mí, todos los ID de las fuentes SVG eran correctas; era la sintaxis de FontSquirrel que era wonky. Usar la sintaxis actualizada a prueba de balas de FontSpring me solucionó el problema, y ​​parece funcionar completamente en todos los navegadores.

Answer 4

Font face funciona en el safari móvil, estoy usando en iphone 3. También copié el código de squirl de fuente pero no funcionó. Aquí está el código actualizado. Use esto y funcionará en todas partes.

@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

Estaba teniendo esta misma situación. Lo resolví actualizando las rutas a la fuente. A pesar de que Chrome & Safari se cargarlos bien, el IOS no estaba reconociendo mi camino, que estaba

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

he cambiado esa línea para incluir un / al comienzo de la ruta de la fuente y que todo fija.

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

También podría intentar usar una ruta absoluta.

Answer 6

Había estado trabajando con esto durante una hora antes de darme cuenta de mi estúpido error.

Mobile Safari es CASE SENSITIVE para las fuentes, mientras que Desktop Safari no lo es.

Si su fuente se titula: font.svg, debe agregarla exactamente como está. Si lo agrega con una Capital F, a Desktop Safari no le importará, pero el móvil lo hará.