Las fonts de icono no se cargan en IE11

Estamos utilizando icomoon para nuestras fonts de icons, y funcionan bien en Chrome y Firefox, pero no se mostrarán en IE11 … A veces. Parece funcionar en la carga de la primera página, pero no en las cargas de página posteriores. Borrar el caché no parece restablecerlo. Este problema puede estar presente en otras versiones de IE, en este momento solo nos estamos centrando en IE11.

Aquí está nuestra @ font-face:

@font-face { font-family: 'icon'; src:url('fonts/icon.eot?-3q3vo5'); src:url('fonts/icon.eot?#iefix-3q3vo5') format('embedded-opentype'), url('fonts/icon.woff?-3q3vo5') format('woff'), url('fonts/icon.ttf?-3q3vo5') format('truetype'), url('fonts/icon.svg?-3q3vo5#rezku') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'icon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-alphabet:before { content: "\e600"; } /* etc etc etc */ 

Pero aquí es donde se pone raro. En cuanto a las herramientas de desarrollador, se está enviando una solicitud HTTP para las fonts, pero solo se están recibiendo unos pocos cientos de bytes (probablemente solo los encabezados).

Panel de red

Pero la respuesta HTTP muestra la longitud del contenido correctamente en varios kilobytes.

Encabezados de respuesta

La pestaña “Cuerpo de respuesta” solo dice “No hay datos para ver”.

Puede ver en la captura de pantalla del Panel de red que Google Fonts no se comporta así.

Al pegar la URL en la barra de direcciones, se descarga el archivo completo.

Se encontró con un problema similar y, a partir de la captura de pantalla anterior, la respuesta tiene un encabezado Cache-Control de ‘no-store’. IE parece tener problemas con el almacenamiento en caché y las fonts.

La eliminación de los encabezados ‘Cache-Control: no-store’ y ‘Pragma: no-cache’ funcionó para que pudiéramos volver a mostrar las fonts de íconos.

https://github.com/FortAwesome/Font-Awesome/issues/6454

Después de investigar el mismo problema y analizar varias soluciones publicadas en línea, creé la siguiente lista de solución de problemas, que cubre la mayoría de las causas posibles:

  1. Las descargas de fonts están deshabilitadas en IE, en Opciones de Internet / Seguridad / Nivel personalizado / Descargas de fonts activadas / desactivadas. Pueden ser deshabilitados por su administrador de red, en cuyo caso no podrá ver ni cambiar esta configuración.
  2. Sus encabezados HTTP impiden que IE almacene el archivo de fuente localmente. Para solucionarlo, elimine todos los encabezados Cache-Control: no-store, no-cache o Pragma: no-cache , o cualquier Expires con una fecha en el pasado. También el encabezado Vary tiene sus trucos en IE, si se configura en cualquier otra cosa que no sea Accept-Encoding , User-Agent , Host o Accept-Language entonces IE no guardará nada en caché, a menos que un encabezado ETAG también esté presente (vea esta publicación de MSDN blog ) .
  3. No establece los tipos MIME correctos para la descarga de la fuente. Por ejemplo, Jetty 9 establecerá por defecto Content-Type: text/plain para los tipos de fuente habituales ( eot, woff, woff2 ). Consulte esta respuesta para conocer los tipos de contenido adecuados para usar.
  4. Asegúrese de usar la display: block o display: inline-block en display: inline-block para su elemento de icono.
  5. Finalmente, asegúrese de revisar la guía de resolución de problemas en FontAwesome.

Tuve un problema similar y parece ser causado por IE que tiene dificultades con ciertos ajustes de display y position en combinación con iconfonts.

Por lo general, debería funcionar utilizando:

 element:before { display:block; position: absolute; ... your styles ... } 

Me enfrenté a un problema similar, pero con los icons de fonts Bootstrap (Glyphicons). Puedes probar si esto funciona:

(Generalmente en Windows 10) la configuración de IE-11 se ha cambiado para que no se descarguen las fonts externas y solo se usen las fonts disponibles en Windows. Este es el comportamiento predeterminado.

Sin embargo, podemos cambiar esta configuración en IE para permitirle descargar fonts externas. A continuación se detallan los pasos a seguir en IE- Vaya a: Configuración >> Opciones de Internet >> Seguridad enter image description here

Haga clic en “Internet” (o en cualquier zona que pueda estar usando) >> “Nivel personalizado …”
Siguiente en la ‘configuración de seguridad’ – Habilita ‘Descarga de fuente’. Por defecto estaría deshabilitado. enter image description here

Recarga la página

La syntax es correcta, sin embargo puede haber un problema con la forma en que convertidor convertiste de .tff a .eof. Vea este artículo para obtener más detalles sobre este asunto en general http://www.iandevlin.com/blog/2009/12/webdev/adventures-with-font-face

Mientras tanto, podría intentar probar el problema utilizando una fuente alojada en fonts de Google. Digo esto porque Google maneja la compatibilidad de navegadores cruzados sin problemas. Si resulta que la fuente de Google funciona, entonces sabes que es un problema con la forma en que se convirtió tu fuente y tienes que probar con otra. Por lo que entiendo, Font Squirrel es realmente bueno generando fonts compatibles con navegador cruzado. Espero que esto ayude, buena suerte

Este es el problema: https://docs.microsoft.com/en-us/windows/security/threat-protection/block-untrusted-fonts-in-enterprise#Turn_on_and_use_the_Blocking_untrusted_fonts_feature

Básicamente, Microsoft nos está obligando a volver a utilizar hojas de sprites.

En mi caso, fue corrupto .eot archivo de fuente. Genere uno nuevo (+ nuevos estilos .css) y solucionó el problema. Intentalo.

PD. Asegúrese de admitir EOT para IE en @ font-face, por ejemplo:

 @font-face { font-family: "fontName"; src:url("../../src/theme/fonts/fontName.eot"); src:url("../../src/theme/fonts/fontName.eot?#iefix") format("embedded-opentype"), url("../../src/theme/fonts/fontName.woff") format("woff"), url("../../src/theme/fonts/fontName.ttf") format("truetype"), url("../../src/theme/fonts/fontName.svg#fontName") format("svg"); font-weight: normal; font-style: normal; }