Не вдалося розшифрувати завантажений шрифт

Це помилка, яку я отримую в Chrome, і, на жаль, пошук не дав мені великих результатів. Сам шрифт відображається правильно. Однак я все одно отримую цю помилку / попередження. Більш конкретно, це повне попередження:

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

Мої CSS такі:

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

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

Я просто не розумію. Шрифт нанесено правильно, але попередження завжди є. Спроба використання Sans-Serifзмушує шрифт повернутися до звичайного шрифту браузера, так що це може бути, але я не впевнений, і навіть після пошуку я нічого не знайшов. Дякую!

EDIT

Існують різні файли шрифтів, усі з однієї родини. Я намагаюся їх усіх завантажувати. Файли шрифтів є .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 / type .

Нещодавно у мене є та сама проблема з використанням nginx, оскільки деякі /etc/nginx/mime.typesфайли mime шрифту відсутні у ванільному файлі.

Я вирішив проблему, додавши відсутні типи mime у тому місці, де мені знадобився такий:

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: розширення файлу mgin.types за замовчуванням nginx

Довелося додати 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-ed, використовуючи двійковий метод, а не ASCII. (Залежно від вашого настрою, він може відчувати себе контрінтуїтивним, хаха). Якщо ви FTP файли шрифту використовуєте метод 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. Файли шрифтів додаються до підривчастої гілки (і можуть бути зроблені), але пошкоджуються, спричиняючи помилку в ОП.

Рішенням було завантаження файлів шрифтів безпосередньо у відділення з моєї локальної файлової системи. Я припускаю, що це сталося тому, що файли патчів SVN повинні конвертувати все у формат ASCII, і не обов'язково зберігати двійкові файли шрифтів. Але це лише здогадка.

У моєму випадку - за допомогою React with Gatsby - проблему було вирішено подвійною перевіркою всіх моїх шляхів. Я використовував React / Gatsby з Sass, і вихідні файли Gatsby шукали шрифти в іншому місці, ніж компільовані файли. Після того, як я копіював файли в кожен шлях, цієї проблеми не було.

У моєму випадку при завантаженні шаблону файли шрифтів були просто порожніми файлами. Можливо, проблема з завантаженням. Chrome дав цю загальну помилку щодо цього. Я думав , що спочатку рішення змінюється від woffдо font-woffвирішена, але це тільки зробило Chrome ігнорувати шрифти. Моїм рішенням було пошук шрифтів по одному та завантаження / заміна їх.

Якщо ви використовуєте express, вам потрібно дозволити подання статичного вмісту, додавши щось на зразок: var server = express (); server.use (express.static ('./ public')); // де 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/isissue/325

Якщо він знаходиться на сервері (а не у localhost), спробуйте завантажити шрифти вручну, оскільки іноді 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>