Error al decodificar la fuente descargada


149

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.


2
¿Por qué la barra inclinada final en la URL? ¿Está intentando cargar todos los archivos de un directorio o en realidad es una redirección a un solo archivo de fuente?
Álvaro González

@ ÁlvaroG.Vicario Hola, gracias por tu tiempo. Edité la pregunta para aclararla.
Luís Ferreira

Respuestas:


101

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.


Edité mi pregunta para aclararla. No estoy seguro de si cambia algo de lo que publicaste. Perdón por el desastre y gracias por tu tiempo.
Luís Ferreira

1
Tienes que usar necesariamente @font face? Sé que Lato está disponible en las fuentes de Google. De todos modos, puede probar esto: font-family: 'Lato'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url('../font/file for regular font.wof') format('wof');este código para cada tipo de fuente, regular, negrita, etc ...
Germano Plebani

1
Terminé usando la opción de fuentes de google y funciona bien. Gracias. Acepté tu respuesta.
Luís Ferreira

9
Esta pregunta tiene la etiqueta 'no se pudo decodificar la fuente descargada'. La respuesta es una situación específica, y en realidad no indica qué significa el error.
Krii

24

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");

1
para mí ./ o ../ no funcionaba, pero la eliminación de la / por completo trabajado pasó de /assets...a assets...¡Muchas gracias!
Shereef Marzouk

21

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


77
el formato font-woff es incorrecto, debería leer "woff". Y con esto, Chrome considera la fuente woff como un formato desconocido y pasa al siguiente mejor formato (probablemente ttf de woff2 aquí)
Arthur

muchas gracias, con esta solución también podría resolver el problema con otros formatos (ttf, woff2, ...).
Far

55
Lamentablemente esta respuesta es incorrecta. Puede que no esté claro lo que dice @Arthur, pero si cambia el nombre del formato de fuente, el navegador literalmente ignorará la fuente, porque no se registra como fuente. En la herramienta de inspección de Chrome (F12), vaya a la pestaña Aplicación y luego a Marcos> Arriba> Fuentes. Intente utilizar esta solución y verá que se eliminan las fuentes. Raramente uso downvotes en SO, pero en este caso la respuesta en realidad empeora a los lectores, porque podrían pensar que han resuelto el problema, pero solo lo han camuflado.
André C. Andersen

¡Eso resolvió mi problema al importar archivos woff en un proyecto de Nextjs! ¡Muchas gracias!
Thanh-Quy Nguyen

Como @ AndréC.Andersen dice: ESTA RESPUESTA SOLO CAMUFLA EL PROBLEMA Y NO LO ARREGLA .
JohnK

12

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


12

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ó.


Gracias, funciona. Entonces, si alguien está cargando las fuentes de Google, simplemente agregue eso type="text/css"y el mensaje de advertencia en la consola del navegador desaparecerá después de la actualización 'dura'
lewis4u

6

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')

6

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);

3
¡También recibí el mismo error con las fuentes de Google, cuando realicé una recarga difícil, el problema se resolvió automáticamente!
Maulik Gangani

1
-1, lo siento. ¡uno no debería usar httpssoporte de caída para esto! Hace que su sitio sea inseguro . ¡La observación de @MaulikGangani funciona! Considere integrarlo en su respuesta
Ciprian Tomoiagă

4

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.


3

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;
}

1
¡Si! Eliminé el formato ('woff2') y eliminó las advertencias. Gracias.
duyn9uyen

3

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


2

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.


¿Hay otro término para esto? Parece que no puedo encontrar esa opción en ninguno de mis clientes FTP.
Sarcoma

Solo conozco los términos BIN y ASCII de los navegadores de línea de comandos * nix. Supongo que muchos clientes FTP modernos sabrían cómo qué archivos son binarios y cuáles no, por lo que tal vez no sea su problema. Si desea probar si su cliente FTP está enviando en modo binario, use FTP para mover datos binarios, como un .jpg, luego intente verlo. Si se envió en modo ASCII, no se mostrará. (Ver jscape.com/blog/… )
Robert Gowland

Ah ya veo, gracias por la explicación. Todas las imágenes que estoy cargando están bien, eventualmente encontré el modo binario en FileZilla, desafortunadamente no me ayudó. No pude encontrar una opción en PHP Storm para binario, pero como dije, las imágenes están bien, así que supongo que este no es el problema que tengo.
Sarcoma

1

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


1
como hacer esto ?
Baim incorrecto

1

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.


1

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ó.


1

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.


0

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.


0

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>


0

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.


0

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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.