Не удалось декодировать загруженный шрифт

Это ошибка, которую я получаю в Chrome, и, к сожалению, ее поиск не дал мне особых результатов. Сам шрифт отображается правильно. Однако я все еще получаю эту ошибку / предупреждение. Более конкретно, это полное предупреждение:

"Не удалось декодировать загруженный шрифт: http: // localhost: 8000 / app / fonts / Lato / "

Мой CSS это:

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

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

Я просто не понимаю. Шрифт применяется правильно, но предупреждение всегда есть. Попытка использования Sans-Serifзаставляет шрифт вернуться к обычному шрифту браузера, так что, возможно, это так, но я не уверен, и даже после поиска я ничего не нашел. Спасибо!

РЕДАКТИРОВАТЬ

Существуют различные файлы шрифтов, все из одной семьи. Я пытаюсь загрузить их всех. Файлы шрифтов есть .ttf. Я загружаю их из локальной папки, и есть различные файлы шрифтов, например Lato-Black.ttf, Lato-Bold.ttfи Lato-Italic.ttfт. Д.

В правиле CSS вы должны добавить расширение файла. Этот пример с самой глубокой возможной поддержкой:

@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 */
}

РЕДАКТИРОВАТЬ:

«Не удалось декодировать загруженный шрифт» означает, что шрифт поврежден или неполон (отсутствуют метрики, необходимые таблицы, записи имен, миллион возможных вещей).

Иногда эта проблема вызвана самим шрифтом. Шрифт Google предоставляет правильный шрифт, который вам нужен, но если необходим шрифт, я использую Transfonter для генерации всех форматов шрифтов.

Иногда FTP-клиент повреждает файл (не в этом случае, потому что он находится на локальном компьютере). Обязательно передайте файл в двоичном формате, а не в ASCII.

Я столкнулся с подобной проблемой в Visual Studio, которая была вызвана неправильной url() путем к рассматриваемому шрифту.

Я перестал получать эту ошибку после изменения (например):

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

к этому:

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

Изменение формата ('woff') на формат ('font-woff') поможет мне решить эту проблему только сейчас.

Просто измените небольшое изменение здесь от ответа Джермано Плебани

 @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 */
}

Пожалуйста, проверьте, если ваш браузер может открыть его и какой тип

Убедитесь, что ваш сервер отправляет файлы шрифтов с правильным MIME / тип .

Недавно у меня возникла та же проблема с использованием nginx, потому что некоторые типы шрифтов mime отсутствуют в его ванильном /etc/nginx/mime.typesфайле.

Я исправил проблему, добавив недостающие типы пантомимы в то место, где они были мне нужны:

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

Вы также можете проверить это для расширения mime.types в nginx: расширение файла nginx mime.types по умолчанию

Я должен был добавить type="text/css"к моей ссылке тег. Я изменил это с:

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

чтобы:

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

После того, как я изменил его, ошибка исчезла.

У меня была такая же проблема, и я решил ее, изменив

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

в

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

Для меня эта ошибка произошла, когда я ссылался на шрифт Google, используя https. Когда я переключился на http, ошибка ушла. (и да, я пробовал это несколько раз, чтобы подтвердить, что это было причиной)

Итак, я изменился:

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

Для того, чтобы:

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

Иногда эта проблема возникает, когда вы загружаете / скачиваете шрифты, используя неверный метод FTP. Шрифты должны быть обработаны по FTP с использованием двоичного метода, а не ASCII. (В зависимости от вашего настроения, это может показаться нелогичным, смеется). Если вы загрузили файлы шрифтов, используя метод ASCII, вы можете получить это сообщение об ошибке. Если вы выполняете ftp-файлы с помощью метода «auto» и получаете это сообщение об ошибке, попробуйте ftp принудительно применить двоичный метод.

У меня была та же проблема со шрифтом awesome v4.4, и я исправил его, удалив формат woff2. Я получал предупреждение только в 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;
}

В моем случае это было вызвано неверным путем, в .htaccess. пожалуйста, проверьте правильность вашего пути к файлу.

Для меня ошибкой было забыть перевести FTP в двоичный режим перед загрузкой файлов шрифтов.

редактировать

Вы можете проверить это, загрузив другие типы двоичных данных, таких как изображения. Если они также не отображаются, то это может быть вашей проблемой.

У меня также была такая же проблема, но я решил добавить Content-Type: application / x-font-ttf в заголовок ответа для всех файлов .ttf.

В моем случае это было вызвано созданием файла исправления SVN, который включал добавление файлов шрифтов. Вот так:

1. Добавить файлы шрифтов из локальной файловой системы в подрывную магистраль
2. Багажник работает как положено
3. Создать SVN патч изменений ствола, чтобы включить добавление файлов шрифтов
4. Применить патч к другой ветке
5. Файлы шрифтов добавляются в подрывную ветвь (и могут быть зафиксированы), но они повреждены, что приводит к ошибке в OP.

Решением было загрузить файлы шрифтов прямо в ветку из моей локальной файловой системы. Я предполагаю, что это произошло потому, что файлы исправлений SVN должны преобразовывать все в формат ASCII и не обязательно сохранять двоичные файлы шрифтов. Но это только предположение.

В моем случае - используя React с Гэтсби - проблема была решена двойной проверкой всех моих путей. Я использовал React / Gatsby с Sass, и исходные файлы Gatsby искали шрифты в другом месте, чем скомпилированные файлы. После того, как я продублировал файлы в каждом пути, эта проблема исчезла.

В моем случае при загрузке шаблона файлы шрифтов были просто пустыми файлами. Вероятно, проблема с загрузкой. Хром дал эту общую ошибку об этом. Сначала я подумал о том, чтобы перейти от решения woffк font-woffрешению, но это только заставило Chrome игнорировать шрифты. Моим решением было найти шрифты один за другим и загрузить / заменить их.

Если вы используете экспресс, вам нужно разрешить показ статического контента, добавив что-то вроде: var server = express (); server.use (express.static ( './ общественности')); // где public - это корневая папка приложения с содержащимися в ней шрифтами на любом уровне, т. е. public / fonts или public / dist / fonts ... // Если вы используете connect, Google для аналогичной конфигурации.

Я использую .Net Framework 4.5 / IIS 7

Чтобы исправить это, я положил файл Web.config в папку с файлом шрифта.

Содержимое Web.config:

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

для меня это была проблема с файлами lfs, которые не были загружены

git lfs fetch --all

исправил проблему.

см. https://github.com/git-lfs/git-lfs/issues/325

Если он находится на сервере (не на локальном хосте), попробуйте загрузить шрифты вручную, потому что иногда FTP-клиент (например, FileZilla) повреждает файлы, и это может вызвать проблему. Для меня я загрузил вручную, используя интерфейс Cpanel.

Мой случай выглядел похожим, но шрифт был поврежден (и поэтому невозможно декодировать). Это было вызвано конфигурацией в Maven. Мне помогло добавление nonFilteredFileExtension для расширений шрифтов maven-resources-plugin:

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