Error al decodificar la fuente descargada

Este es un error que estoy obteniendo en Chrome y desafortunadamente buscarlo no me ha dado muchos resultados. La fuente en sí está apareciendo correctamente. Sin embargo, todavía recibo este error / advertencia. Más específicamente, esta es la advertencia completa:

"Error al decodificar la fuente descargada: http: // localhost: 8000 / app / fonts / Lato / "

Mi CSS son estos:

@font-face {
    font-family:"Lato";
    src: url("../fonts/Lato/");
}

html, body {
    font-family:'Lato';
}

Es sólo que no entiendo. La fuente se aplica correctamente, pero la advertencia siempre está ahí. Intentar usar Sans-Serifhace que la fuente vuelva a la fuente normal del navegador, por lo que puede ser, pero no estoy seguro, e incluso después de buscar no he encontrado nada. ¡Gracias!

EDITAR

Hay varios archivos de fuentes, todos de la misma familia. Estoy tratando de cargarlos a todos. Los archivos de fuentes son .ttf. Yo los estoy cargando desde una carpeta local, y hay varios archivos de fuente-como Lato-Black.ttf, Lato-Bold.ttf, Lato-Italic.ttfetc.

En la regla CSS, debe agregar la extensión del archivo. Este ejemplo con el apoyo más profundo posible:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

EDITAR:

"Error al decodificar la fuente descargada" significa que la fuente está corrupta o está incompleta (métricas faltantes, tablas necesarias, nombres de registros, un millón de cosas posibles).

Algunas veces este problema es causado por la fuente misma. La fuente de Google proporciona la fuente correcta que necesita, pero si la fuente es necesaria, uso Transfonter para generar todo el formato de fuente.

A veces es el cliente FTP el que corrompe el archivo (no en este caso porque está en una PC local). Asegúrese de transferir el archivo en binario y no en ASCII.

Experimenté un problema similar en Visual Studio, que fue causado por una url()ruta incorrecta a la fuente en cuestión.

Dejé de recibir este error después de cambiar (por ejemplo):

@@font-face{
    font-family: "Example Font";
    src: url("/Fonts/ExampleFont.eot?#iefix");

a esto:

@@font-face{
    font-family: "Example Font";
    src: url("../fonts/ExampleFont.eot?#iefix");

Cambiar de formato ('woff') a formato ('font-woff') me ayuda a resolver este problema en este momento.

Solo cambie un pequeño cambio aquí de la respuesta de Germano Plebani

 @font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('font-woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Compruebe si las fuentes de su navegador pueden abrirlo y cuál es el tipo

Asegúrese de que su servidor esté enviando los archivos de fuente con el mime / tipo correcto .

Recientemente tuve el mismo problema al usar nginx porque faltan algunos tipos de fuentes mime en su /etc/nginx/mime.typesarchivo vainilla .

Solucioné el problema agregando los tipos mime faltantes en la ubicación donde los necesitaba de esta manera:

location /app/fonts/ {

  #Fonts dir
  alias /var/www/app/fonts/;

  #Include vanilla types
  include mime.types;

  #Missing mime types
  types  {font/truetype ttf;}
  types  {application/font-woff woff;}
  types  {application/font-woff2 woff2;}
}

También puede verificar esto para extender mime.types en nginx: extender el archivo nginx mime.types predeterminado

Tuve que agregar type="text/css"a mi etiqueta de enlace. Lo cambié de:

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

a:

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet" type="text/css">

Después de cambiarlo, el error desapareció.

Acabo de tener el mismo problema y lo resolví cambiando

src: url("Roboto-Medium-webfont.eot?#iefix")

a

src: url("Roboto-Medium-webfont.eot?#iefix") format('embedded-opentype')

Para mí, este error estaba ocurriendo cuando hice referencia a una fuente de Google usando https. Cuando cambié a http, el error desapareció. (y sí, lo intenté varias veces para confirmar que esa fue la causa)

Entonces cambié:

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);

A:

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);

A veces, este problema ocurre cuando carga / descarga las fuentes utilizando el método FTP incorrecto. Las fuentes deben ser FTP-ed utilizando un método binario, no ASCII. (Dependiendo de su estado de ánimo, puede parecer contradictorio, jajaja). Si ftp los archivos de fuente utilizando el método ASCII, puede obtener este mensaje de error. Si ftp sus archivos con un método 'automático', y recibe este mensaje de error, intente forzar el método binario ftp.

Estaba teniendo el mismo problema con font awesome v4.4 y lo solucioné eliminando el formato woff2. Solo recibí una advertencia en Chrome.

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

En mi caso, fue causado con un archivo de ruta incorrecto, en .htaccess. por favor verifique la corrección de su ruta de archivo.

Para mí, el error fue olvidar poner FTP en modo binario antes de cargar los archivos de fuentes.

Editar

Puede probar esto cargando otros tipos de datos binarios como imágenes. Si tampoco se muestran, entonces este puede ser su problema.

También tuve el mismo problema, pero lo resolví agregando 'Content-Type': 'application / x-font-ttf' en el encabezado de respuesta para todos los archivos .ttf

En mi caso, esto fue causado por la creación de un archivo de parche SVN que abarcaba la adición de los archivos de fuente. Al igual que:

1. Agregue archivos de fuentes del sistema de archivos local al tronco subversionado
2. El maletero funciona como se esperaba
3. Cree parches SVN de cambios en el tronco, para incluir la adición de archivos de fuentes
4. Aplicar parche a otra rama
5. Los archivos de fuentes se agregan a la rama subversionada (y pueden confirmarse), pero están dañados, produciendo un error en OP.

La solución fue cargar los archivos de fuentes directamente en la rama desde mi sistema de archivos local. Supongo que esto sucedió porque los archivos de parche SVN deben convertir todo al formato ASCII y no necesariamente retienen los archivos binarios para los archivos de fuentes. Pero eso es solo una suposición.

En mi caso, usando React with Gatsby, el problema se resolvió con una doble verificación de todos mis caminos. Estaba usando React / Gatsby con Sass y los archivos fuente de Gatsby buscaban las fuentes en un lugar diferente al de los archivos compilados. Una vez que dupliqué los archivos en cada ruta, este problema desapareció.

En mi caso, al descargar una plantilla, los archivos de fuente eran solo archivos vacíos. Probablemente un problema con la descarga. Chrome dio este error genérico al respecto. Al principio pensé en la solución de cambiar de woffpara font-woffresolverlo, pero solo hizo que Chrome ignorara las fuentes. Mi solución fue encontrar las fuentes una por una y descargarlas / reemplazarlas.

Si está utilizando express, debe permitir la publicación de contenido estático agregando algo como: var server = express (); server.use (express.static ('./ public')); // donde public es la carpeta raíz de la aplicación, con las fuentes que contiene, a cualquier nivel, es decir, public / fonts o public / dist / fonts ... // Si está utilizando connect, google para una configuración similar.

Yo uso .Net Framework 4.5 / IIS 7

Para solucionarlo, puse el archivo Web.config en la carpeta con el archivo de fuente.

Contenido de Web.config:

<?xml version="1.0"?>
<configuration>
  <system.web>
    <authorization>
      <allow users="*" />
    </authorization>
  </system.web>
</configuration>

para mí fue un problema con los archivos lfs que no se descargaron

git lfs fetch --all

Se solucionó el problema.

ver https://github.com/git-lfs/git-lfs/issues/325

Si está en el servidor (no en localhost), intente cargar las fuentes manualmente, porque a veces el cliente FTP (por ejemplo, FileZilla) corrompe los archivos y puede causar el problema. Para mí, cargué manualmente usando la interfaz Cpanel.

Mi caso parecía similar, pero la fuente estaba dañada (y era imposible decodificarla). Fue causado por la configuración en maven. Agregar nonFilteredFileExtension para extensiones de fuente dentro maven-resources-pluginme ayudó:

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <configuration>
        <nonFilteredFileExtensions>
            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
            <nonFilteredFileExtension>otf</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
        </nonFilteredFileExtensions>
    </configuration>
</plugin>