Error al decodificar la fuente descargada, error de análisis OTS: etiqueta de versión no válida + rieles 4

Estoy haciendo una compilación previa de activos y ejecuto la aplicación en modo de producción. Después de la compilación cuando cargo mi página de índice, recibí las siguientes advertencias en la consola de Chrome:

Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.ttf?v=2.0.0
prospects:1 OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.woff?v=2.0.0
prospects:1 OTS parsing error: invalid version tag

El problema es que no está cargando iconos en lugar de mostrar cuadrados .

Utilizamos las fuentes personalizadas y el código es:

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

No sé lo que me falta de mi parte. Busqué mucho y también probé la solución, pero no obtuve ningún éxito. En el modo de desarrollo funciona bien, pero no sé por qué se muestra cuadrado en el modo de producción.

Obtuve exactamente el mismo error, y en mi caso resultó ser por un camino incorrecto para la @font-facedeclaración. El inspector web nunca se quejó con un 404 ya que el servidor de desarrollo que estamos usando (servidor en vivo) se configuró para servir el index.html predeterminado en cualquier 404: s. Sin conocer ningún detalle sobre su configuración, esto podría ser un culpable probable.

Si se ejecuta en IIS como el servidor y .net 4 / 4.5, es posible que falten definiciones de extensión mime / file en Web.config, como esta:

<system.webServer>
	<staticContent>
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <remove fileExtension=".ttf" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <remove fileExtension=".svg" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
    </staticContent>
</system.webServer>

Yo estaba teniendo el mismo problema., OTS parsing error: Failed to convert WOFF 2.0 font to SFNT (index):1 Failed to decode downloaded font: http://dev.xyz/themes/custom/xyz_theme/fonts/xyz_rock/rocksansbold/Rock-SansBold.woff2

Si recibió este mensaje de error al intentar confirmar su fuente, entonces es un problema con .gitattributes "warning: CRLF will be replaced by LF "

La solución para esto es agregar cualquier fuente con la que tenga el problema en .gitattributes

*.ttf     -text diff
*.eot     -text diff
*.woff    -text diff
*.woff2   -text diff

Luego eliminé los archivos de fuentes corruptos y volví a aplicar los nuevos archivos de fuentes y está funcionando muy bien.

tratar

@font-face {
  font-family: 'icomoon';
  src: asset-url('icomoon.eot');
  src: asset-url('icomoon.eot?#iefix') format('embedded-opentype'),
       asset-url('icomoon.ttf') format('truetype'),
       asset-url('icomoon.woff') format('woff'),
       asset-url('icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

y renombra tu archivo a application.css.scss

Tenía una fuente dañada, aunque parecía estar cargando sin problemas y, según las fuentes de Chrome Devtools, el recuento de bytes no era correcto, así que lo descargué nuevamente y lo resolvió.

Simplemente indique el formato en @ font-face de la siguiente manera:

@font-face {
  font-family: 'Some Family';
  src: url('/fonts/fontname.ttf') format('ttf'); /* and this for every font */
}

Tuve el mismo problema y eso se debió a que git trataba estos archivos como texto. Entonces, mientras revisaba los archivos en los agentes de compilación, no se mantuvo el binario.

Agregue esto a su .gitattributesarchivo e intente.

*.eot binary
*.ttf binary
*.woff binary
*.woff2 binary

Al usar angular-cli, esto es lo que funciona para mí:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension=".eot" />
            <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
            <remove fileExtension=".ttf" />
            <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
            <remove fileExtension=".svg" />
            <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
            <remove fileExtension=".woff" />
            <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
            <remove fileExtension=".woff2" />
            <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
            <remove fileExtension=".json" />
            <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
        <rewrite>
            <rules>
                <rule name="AngularJS" stopProcessing="true">
                    <match url="^(?!.*(.bundle.js|.bundle.js.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.chunk.js|.chunk.js.map|.png|.jpg|.ico|.eot|.svg|.woff|.woff2|.ttf|.html)).*$" />
                    <conditions logicalGrouping="MatchAll">
                    </conditions>
                    <action type="Rewrite" url="/"  appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Recibía los siguientes errores:

Failed to decode downloaded font: [...]/fonts/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag

que se corrigió después de descargar el archivo sin procesar directamente desde:
https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2

El problema era que había un error de proxy al descargar el archivo (contenía el mensaje de error HTML).

Vaya a la dirección a continuación en GitHub y descargue cada uno de los archivos FontAwesome.

https://github.com/FortAwesome/font-awesome-sass/tree/master/assets/fonts/font-awesome

... pero en lugar de hacer clic derecho y guardar el enlace como, haga clic en cada uno de los archivos y use el botón 'Descargar' para guardarlos.

Descubrí que guardar el enlace como descargado una página HTML y no el archivo binario FontAwesome en sí.

Una vez que tuve todos los binarios, funcionó para mí.

Mi problema fue que estaba declarando dos fuentes, y scss parece esperar que declares el nombre de la fuente.

después de tu @font-face{} debes declarar $my-font: "OpenSans3.0 or whatever";

y esto para cada fuente.

:-)

Para los usuarios de angular-cli y webpack sospeché que hay algún problema al importar las fuentes en el archivo css, así que también proporcione la ubicación de la URL codificada con comillas simples de la siguiente manera:

@font-face {
font-family: 'some_family';
src: url('./assets/fonts/folder/some_family-regular-webfont.woff2') format('woff2'),
     url('./assets/fonts/folder/some_family-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Esta publicación puede ser antigua, pero esta es la solución que funcionó para mí.

He tenido el mismo problema.

Agregar la versión de fuente (p ?v=1.101. Ej. ) A la fuente URLS debería ser el truco;)

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/open-sans-v15-latin-600.eot?v=1.101'); /* IE9 Compat Modes */
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
    url('../fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/open-sans-v15-latin-600.woff2?v=1.101') format('woff2'), /* Super Modern Browsers */
    url('../fonts/open-sans-v15-latin-600.woff?v=1.101') format('woff'), /* Modern Browsers */
    url('../fonts/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

Hacer clic (clic con el botón derecho del mouse) en la versión TTF de la fuente y seleccionar "Obtener información" (Mac OSX) "Propiedades" (Windows) en el menú contextual debería ser suficiente para acceder a la versión de la fuente.

Si está usando Chrome, intente agregar una versión de tipo fuente (OTF) como se muestra a continuación:

    ...
     url('icomoon.otf') format('opentype'),
    ...

¡Salud!

Si usa bootstrap, actualice el bootstrap.min.cssarchivo bootstrap css ( ) y los archivos de fuentes. Solucioné mi problema con esta solución.

Estoy usando ASP.NET con IIS y resulta que solo necesitaba agregar el tipo MIME a IIS: '.woff2' / 'application / font-woff'

Después de probar muchos otros enfoques, y muchas reinstalaciones y comprobaciones, acabo de solucionar el problema borrando los datos de navegación de Chrome (imágenes y archivos en caché) y luego actualizando la página.

Tuve el mismo problema cuando abrí y guardé .woffy. woff2archivos a través de Sublime Text con EditorConfigopción end_of_line = lf. Acabo de copiar archivos a la carpeta de fuentes sin abrirlos en Sublime y el problema se resolvió.

Si otras respuestas no funcionaron, intente:

1. compruebe el archivo .htaccess

   # Fonts
# Add correct content-type for fonts
   

   AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
AddType image/svg+xml .svg
   

2. borrar el caché del servidor

3. borrar el caché del navegador y recargar

Verifique el archivo CSS de su fuente. (fontawesome.css / fontawesome.min.css) , verá así:

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot-v=4.6.3.htm');
    src: url('../fonts/fontawesome-webfont.eot#iefix-v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2-v=4.6.3.htm') format('woff2'), url('../fonts/fontawesome-webfont.woff-v=4.6.3.htm') format('woff'), url('../fonts/fontawesome-webfont.ttf-v=4.6.3.htm') format('truetype'), url('../fonts/fontawesome-webfont.svg-v=4.6.3.htm#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}

verá la etiqueta de versión después del nombre de la extensión de archivo de su fuente . Me gusta:

-v = 4.6.3

Solo necesita eliminar esta etiqueta de su archivo css. Después de eliminar esto, debe ir a su carpeta de fuentes, y verá:

Y, forme estos archivos de fuente, solo necesita eliminar la etiqueta de versión -v = 4.6.3 del nombre del archivo.

Entonces, el problema será descuidado.

por si esto es relevante para alguien. Obtuve exactamente el mismo error al usar ASP.NET y C # en Visual Studio. Cuando comencé la aplicación desde el estudio visual, funcionó, pero recibí este problema. Mientras tanto, resultó que la ruta a mi proyecto contenía el carácter "#" (c: \ C # \ testapplication). Esto parece confundir a IIS Express (quizás también IIS) y causa este problema. Supongo que "#" es un carácter reservado en algún lugar de ASP.NET o inferior. Cambiar el camino ayudó y ahora funciona como se esperaba.

Saludos Christof

Lo que me ayudó fue que cambié el orden. El .eot get se carga primero, pero mi error fue al cargar el .eot. Así que abandoné el .eot como primer src para woff2 y el error desapareció.

Entonces el código es ahora:

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2');
  src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
    url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
    url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
    url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

Y es fue:

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.eot?9h1pxj');
  src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
    url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
    url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
    url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

For it is fixed by using below statement in app.web.scss
    $fa-font-path:   "../../node_modules/font-awesome/fonts/" !default;
    @import "../../node_modules/font-awesome/scss/font-awesome";

Estaba teniendo el mismo problema, esto funcionó para mí https://github.com/webpack/webpack/issues/1468