Ots parsing error invalid sfntversion 1008821359

Не удалось декодировать загруженный шрифт, ошибка анализа OTS: неверный тег версии + rails 4

Я делаю активы перед компиляцией и запускаю приложение в производственном режиме. После компиляции, когда я загружаю свою страницу индекса, я получаю следующие предупреждения в консоли chrome:

Проблема в том, что он не загружает иконки, а не показывает квадраты .

мы использовали пользовательские шрифты и код:

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

Я получил точно такую ​​же ошибку, и в моем случае это произошло из-за неправильного пути для @font-face объявления. Веб-инспектор никогда не жаловался на 404, так как используемый нами dev-сервер (live-server) был настроен для обслуживания index.html по умолчанию на любых 404: s. Не зная каких-либо подробностей о вашей настройке, это может быть вероятным виновником.

При работе на IIS в качестве сервера и .net 4 / 4.5 в Web.config могут отсутствовать определения расширений MIME / расширений файлов, например:

У меня была такая же проблема. , 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

Если вы получили это сообщение об ошибке при попытке зафиксировать ваш шрифт, это проблема с .gitattributes » warning: CRLF will be replaced by LF «

Решением для этого является добавление любого шрифта, с которым вы получаете проблему в .gitattributes

Затем я удалил поврежденные файлы шрифтов и повторно применил новые файлы шрифтов, и теперь он работает отлично.

Источник

OTS parsing error #138

I’m using uicons with jsdelivr. Lately, I’m getting the following errors
dashboard:1 Failed to decode downloaded font: https://cdn.jsdelivr.net/npm/@iconscout/unicons@4.0.0/fonts/line/unicons-6.woff2 dashboard:1 OTS parsing error: invalid sfntVersion: 1936028172 dashboard:1 Failed to decode downloaded font: https://cdn.jsdelivr.net/npm/@iconscout/unicons@4.0.0/fonts/line/unicons-9.woff2 dashboard:1 OTS parsing error: invalid sfntVersion: 4008750 dashboard:1 Failed to decode downloaded font: https://cdn.jsdelivr.net/npm/@iconscout/unicons@4.0.0/fonts/line/unicons-3.woff2 dashboard:1 OTS parsing error: invalid sfntVersion: -369077877 dashboard:1 Failed to decode downloaded font: https://cdn.jsdelivr.net/npm/@iconscout/unicons@4.0.0/fonts/line/unicons-11.woff2 dashboard:1 OTS parsing error: invalid sfntVersion: 1110126000

The text was updated successfully, but these errors were encountered:

hey 7aklhz, any luck with this issue?

nope. still there

thanks. console is just full of warnings. using v3.0.1 for now

Hello. Getting the same in Nuxt and using the URL mentioned on the website:

same problem using integration code recomended by website with vue.

i use
in my index.html

Edit: using v3.0.1 fixed but I dont know what icons I will lose

Same problem — I’m using v4.0.0

same problem v4.0.0

@tarunmangukiya: any news on this please ?

Same problem here.

Any chance of a fix? Sure, it’s not urgent, but because it fills up the console with warnings it makes it easy to miss other warnings.

Still an issue! Please fix

I also have this problem in unicons 4.0.0
I decided to swap version 4 for version 3.
It works well for me:

I’m having the exact same issue with 4.0.1. I’m referencing the CSS and font files locally, but I know the paths and everything are correct because the icons display correctly, yet I get the “OTS parsing error” for all .woff2 fonts.

Same problem. v4.0.0 line
Chrome: » Failed to decode downloaded font: »
Mozilla: «downloadable font: rejected by sanitizer «

Источник

Не удалось декодировать загруженный шрифт, ошибка синтаксического анализа OTS: неверный тег версии + рельсы 4

Я делаю предварительные компиляции и запускаю приложение в режиме производства. После компиляции, когда я загружаю мою индексную страницу, я получил следующие предупреждения на консоли хром:

Проблема заключается в том, что он не загружает значки, а не показывает свои квадраты.

мы использовали пользовательские шрифты, а код:

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

Я получил ту же ошибку, и в моем случае это оказалось из-за неправильного пути для объявления @font-face . Веб-инспектор никогда не жаловался на 404, поскольку сервер dev, который мы используем (live-server), был настроен для обслуживания индекса index.html по умолчанию на любых 404: с. Не зная никаких подробностей о вашей настройке, это может быть вероятным виновником.

Если в IIS в качестве сервера и .net 4/4.5 могут отсутствовать определения расширения mime/file в Web.config – например:

У меня была та же проблема. ,
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

Если вы получили это сообщение об ошибке при попытке зафиксировать ваш шрифт, то это проблема с .gitattributes
“ warning: CRLF will be replaced by LF “

Решением для этого является добавление любого шрифта, с которым вы получаете проблему, в .gitattributes

Затем я удалил поврежденные файлы шрифтов, повторно применил новые файлы шрифтов и отлично работает.

и переименуйте файл в application.css.scss

У меня был поврежден шрифт, хотя он, казалось, загружался без проблем, и в разделе “Источники” в Chrome devtools, казалось, отображалось, количество байтов было неправильным, поэтому я снова загрузил его и разрешил.

У меня была такая же проблема, и это связано с тем, что git обрабатывал эти файлы как текст. Поэтому, проверяя файлы в агентах сборки, двоичный файл не поддерживался.

Добавьте это в свой .gitattributes файл и попробуйте.

При использовании angular-cli это то, что работает для меня:

Я получал следующие ошибки:

Проблема заключалась в том, что при загрузке файла произошла ошибка прокси (в нем было сообщение об ошибке HTML).

Перейдите по адресу ниже на GitHub и загрузите каждый из файлов FontAwesome.

… но вместо щелчка правой кнопкой мыши и сохранения ссылки, нажмите на каждый из файлов и используйте кнопку “Загрузить”, чтобы сохранить их.

Я обнаружил, что сохранение ссылки при загрузке HTML-страницы, а не самого двоичного файла FontAwesome.

Как только у меня были все двоичные файлы, это сработало для меня.

Моя проблема заключалась в том, что я объявлял два шрифта, и scss, кажется, ожидает, что вы объявите имя шрифта.

после вашего
@font-face<>
вы должны объявить
$my-font: «OpenSans3.0 or whatever»;

и для каждого шрифта.

Для пользователей angular-cli и webpack я подозревал, что при импорте шрифтов в файл css существует некоторая проблема, поэтому, пожалуйста, укажите местоположение URL, закодированное в одинарных кавычках, следующим образом –

Это сообщение может быть старым, но это решение, которое сработало для меня.

Если вы используете Chrome, попробуйте добавить версию вашего шрифта opentype (OTF), как показано ниже:

Если вы используете bootstrap, тогда обновите файл bootstrap css ( bootstrap.min.css ) и файлы шрифтов. Я решил проблему с этим решением.

Я использую ASP.NET с IIS, и получается, что мне просто нужно добавить
MIME-тип для IIS: ‘.woff2’/’application/font-woff’

После попытки множества других подходов и множества повторных установок и проверок я только что исправил эту проблему, очистив данные из Chrome (кешированные изображения и файлы), а затем обновив страницу.

У меня была такая же проблема, когда я открыл и сохранил файлы .woff и. woff2 через Sublime Text с опцией EditorConfig end_of_line = lf .
Я просто скопировал файлы в папку шрифтов, не открывая их в Sublime, и проблема была решена.

У меня была такая же проблема.

Добавление версии шрифта (например, ?v=1.101 ) к URL-адресам шрифтов должно помочь;)

Нажав (правой кнопкой мыши) на версию шрифта TTF и выбрав “Получить информацию” (Mac OSX) “Свойства” (Windows) в контекстном меню, должно быть достаточно для доступа к версии шрифта.

Если другие ответы не помогли, попробуйте:

проверьте файл .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

очистить кеш сервера

Проверьте свой файл шрифта CSS. (fontawesome.css/fontawesome.min.css), вы увидите следующее:

вы увидите тег версии после имени расширения файла шрифта. Как:

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

И, сформируйте эти файлы шрифтов, вам просто нужно удалить тег версии -v = 4.6.3 из имени файла.

Тогда проблема будет решена.

Просто укажите формат @font-face следующим образом:

Источник

Webpack: Failed to decode downloaded font: OTS parsing error: invalid version tag #923

Description

Since v0.6.1, I’m having an issue with the font I’m using. I was on 0.2.1 before.

Expected behavior

The font should be loaded properly and displayed correctly.

Actual behavior

The font is not displayed and an empty rectangle appear in place of the font/icon

Environment

react-scripts@0.6.1
node v4.5.0
npm 2.15.9

Operating system: OSX 10.11.5 El Capitain
Browser and version: Chrome 53.0.2785.116 64b

Reproducible Demo

The text was updated successfully, but these errors were encountered:

Can you provide a full project reproducing this please?

In the meantime you should be able to use the public folder as an escape hatch to handle fonts without Webpack. There is a section in the user guide on the public folder.

I’ve finded the issue.

The fonts was located in public/fonts/ and css in public/css/ . The font was loaded from the css with url(fonts/myfont.woff) so the font should have been placed in public/css/fonts . Stange about this issue though.

Okay this makes sense. We serve index.html as fallback for unrecognised paths cause it usually makes sense in single page apps. So this is what you were getting instead of the font.

thanks @gaearon loving create-react-app

Hello,
Sorry am late, but in case someone runs into a similar error in future.

I encountered the same issue, and after hours of blind trial and errors, this is how I solved the issue:

Foremost, the browser is unable to use the fonts due to poor formats. In this case, Fonts Squirrel comes in handy. Use the generator to to convert your uploaded standardized web fonts.

After downloading the standardized fonts, move the extracted fonts (*.oet, *.ttf, *.woff, *.woff2) to your public folder in the react app. This ensures that the fonts are available to the react server when the app loads during development and as well after build.

Use the @font-face rule included in the fontsquirrel extract to include the fonts in the .svg file.
You should have something close to this in your .svg file

Источник

Webpack» OTS parsing error » загрузка шрифтов

мой webpack config указывает, что шрифты должны быть загружены с помощью url-loader , и когда я пытаюсь просмотреть страницу с помощью Chrome, я получаю следующую ошибку:

соответствующие части моей конфигурации выглядят так:

это не происходит в Safari, и я не пробовал Firefox.

в разработке я обслуживаю файлы через webpack-dev-server , в производстве они записываются на диск и копируются в S3; в обоих случаях я получаю одинаковое поведение в Хром.

Это также происходит с большими изображениями (больше, чем ограничение 10 кб в конфигурации загрузчика изображений).

9 ответов:

TL; DR используйте абсолютные пути к вашим активам (включая полное имя хоста), установив output.publicPath например»http://example.com/assets/».

проблема

проблема заключается в том, что URL-адреса разрешаются Chrome, когда они анализируются из динамически загруженного CSS blob.

при загрузке страницы браузер загружает ваш файл JavaScript webpack bundle, который (когда вы используете style-loader ) также содержит кодированную копию Base64 вашего CSS, которая загружается на страницу.

Вот как это выглядит в Chrome DevTools

это нормально для всех изображений или шрифтов, которые закодированы в CSS как URI данных (т. е. содержимое файла встроено в CSS), но для активов, на которые ссылается URL браузер должен найти и принести файл.

теперь по умолчанию file-loader (который url-loader делегаты для больших файлов) будет использовать относительные URL для ссылки на активы-и вот в чем проблема!

это URL-адреса, созданные file-loader по умолчанию — относительные url

при использовании относительных URL-адресов Chrome будет разрешать их относительно содержащего CSS-файла. Обычно это нормально, но в этом случае файл, содержащий в blob://. и любой относительные URL-адреса ссылаются таким же образом. Конечным результатом является то, что Chrome пытается загрузить их из родительского HTML-файла и в конечном итоге пытается проанализировать HTML-файл как содержимое шрифта, что, очевидно, не будет работать.

Решение

силу file-loader использовать абсолютные пути, включая протокол («http»или » https»).

измените конфигурацию webpack, чтобы включить что-то эквивалентное:

теперь URL-адреса, которые он генерирует будет выглядеть так:

Абсолютные URL-Адреса!

эти URL-адреса будут правильно проанализированы Chrome и любым другим браузером.

стоит отметить, что если вы извлекаете свой CSS в отдельный файл, у вас не будет этой проблемы, потому что ваш CSS будет в правильном файле, и URL-адреса будут правильно разрешены.

Как asnwered здесь by @mcortesi если вы удалите исходные карты из запроса загрузчика css, css будет построен без использования blob, а URL-адреса данных будут проанализированы нормально

для меня проблемой было мое регулярное выражение. Ниже сделал трюк, чтобы получить bootstrap работает

Как и в случае с @user3006381 выше, моя проблема заключалась не только в относительных URL-адресах, но и в том, что webpack размещал файлы, как если бы они были файлами javascript. Их содержание было все в основном:

в каталоге шрифтов вместо реальных шрифтов и файлов шрифтов были в выходной папке под хэш-кодами. Чтобы исправить это, мне пришлось изменить тест на моем url-загрузчике (в моем случае мой процессор изображений), чтобы не загружать папку шрифтов. Мне все еще нужно было установить выход.publicPath в webpack.конфиг.js as @will-madden отмечает в своем превосходном ответе.

Я испытал ту же проблему, но по разным причинам.

после того, как решение Уилла Мэддена не помогло, я попробовал все альтернативные исправления, которые я мог найти через Intertubes — также безрезультатно. Исследуя дальше, я просто случайно открыл один из файлов шрифтов, о которых идет речь. Исходное содержимое файла каким-то образом было перезаписано Webpack, чтобы включить какую-то информацию о конфигурации, вероятно, от предыдущего возни с загрузчиком файлов. Я заменил поврежденные файлы на оригиналы и вуаля, ошибки исчезли (как для Chrome, так и для Firefox).

Я знаю, что это не отвечает на точный вопрос OPs, но я пришел сюда с тем же симптомом, но по другой причине:

у меня было .scss файлы Slick Slider включены следующим образом:

при ближайшем рассмотрении оказалось, что он пытался загрузить шрифт из недопустимого места ( /assets/css/fonts/slick.woff ), как это было указано в таблице стилей.

Я закончил тем, что просто скопировал /font/ мой assets/css/ и вопрос был решен для меня.

url-загрузчик работает как файл-загрузчик, но может возвращать DataURL, если файл меньше, чем ограничение в байтах.

таким образом, другим решением этой проблемы было бы сделать предел достаточно высоким, чтобы файлы шрифтов включались как DataURL, например, в 100000 более-менее 100Kb :

всегда с учетом того, что предельное число представляет:

ограничение байта для встроенных файлов в качестве URL-адреса данных

таким образом, вам не нужно указывать полный URL-адрес ресурсов. Что может быть сложно, когда вы хотите, чтобы Webpack не только отвечал с localhost.

только одно последнее соображение, эта конфигурация не рекомендуется для производства. Это просто для развития легкости.

если вы используете угловые вы должны проверить, чтобы убедиться, что ваше

тег приходит перед вашим набором таблиц стилей. Я переключил свой код с этого:

и проблема была решена. Спасибо этот пост за то, что открыл мне глаза.

для Webpack (>4.0) решит эту проблему.

используя extract-text-webpack-plugin в принятом ответе это не рекомендуется для Webpack 4.0+.

Источник

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

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

Ответы:

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

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

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

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

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

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

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

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

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

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

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

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

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

Failed to decode downloaded font: OTS parsing error: invalid sfntVersion #29559

Comments

Prerequisites

• I understand and accept the project’s code of conduct
• I have already searched in existing issues and found no previous report of this bug.

Describe the bug and add screenshots

Using Chrome 104 and a fresh install of PrestaShop 8.0.0-beta.1, browsing to example.com/admin yields the following errors in the console:

Expected behavior

No errors in the console.

Steps to reproduce

1. Install PrestaShop.
2. Browse to example.com/admin
3. View errors in the browser console.

PrestaShop version(s) where the bug happened

PHP version(s) where the bug happened

If your bug is related to a module, specify its name and its version

The text was updated successfully, but these errors were encountered:

I can’t reproduce your issue with PS beta 8.
In my console, I do not have these errors. Only some warnings.
Can you screenshot the errors please ?

The errors (shown above) are copy-pasted from the browser console. Screenshot does not add anything.

The server environment works fine with PrestaShop 1.7.8.7, so the issue is not the server environment.

Have you viewed and understood the link to Stack Overflow? My best guess is that the most likely issue is that the font files are corrupted and that your local environment might be compensating for the corruption.

Источник

Не удалось декодировать загруженный шрифт, ошибка анализа OTS: неверный тег версии + rails 4

Я делаю активы перед компиляцией и запускаю приложение в производственном режиме. После компиляции, когда я загружаю свою страницу индекса, я получаю следующие предупреждения в консоли chrome:

Проблема в том, что он не загружает иконки, а не показывает квадраты .

мы использовали пользовательские шрифты и код:

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

Я получил точно такую ​​же ошибку, и в моем случае это произошло из-за неправильного пути для @font-face объявления. Веб-инспектор никогда не жаловался на 404, так как используемый нами dev-сервер (live-server) был настроен для обслуживания index.html по умолчанию на любых 404: s. Не зная каких-либо подробностей о вашей настройке, это может быть вероятным виновником.

При работе на IIS в качестве сервера и .net 4 / 4.5 в Web.config могут отсутствовать определения расширений MIME / расширений файлов, например:

У меня была такая же проблема. , 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

Если вы получили это сообщение об ошибке при попытке зафиксировать ваш шрифт, это проблема с .gitattributes » warning: CRLF will be replaced by LF «

Решением для этого является добавление любого шрифта, с которым вы получаете проблему в .gitattributes

Затем я удалил поврежденные файлы шрифтов и повторно применил новые файлы шрифтов, и теперь он работает отлично.

Источник

vue-cli-service serve corrupts local fonts #6914

Comments

Version

Reproduction link

Environment info

4.5.0 => 4.5.15 @vue/cli-plugin-vuex:

4.5.0 => 4.5.15 @vue/cli-service:

4.5.0 => 4.5.15 @vue/cli-shared-utils: 4.5.15 @vue/compiler-core: 3.2.26 @vue/compiler-dom: 3.2.26 @vue/compiler-sfc: ^3.0.0 => 3.2.26 @vue/compiler-ssr: 3.2.26 @vue/component-compiler-utils: 3.3.0 @vue/devtools-api: 6.0.0-beta.21.1 @vue/eslint-config-typescript: ^7.0.0 => 7.0.0 @vue/preload-webpack-plugin: 1.1.2 @vue/reactivity: 3.2.26 @vue/reactivity-transform: 3.2.26 @vue/runtime-core: 3.2.26 @vue/runtime-dom: 3.2.26 @vue/server-renderer: 3.2.26 @vue/shared: 3.2.26 @vue/web-component-wrapper: 1.3.0 @yeliulee/vue-mdi-svg: ^1.0.4 => 1.0.4 eslint-plugin-vue: ^7.0.0 => 7.20.0 typescript:

4.1.5 => 4.1.6 vue: ^3.0.0 => 3.2.26 vue-eslint-parser: 7.11.0 vue-hot-reload-api: 2.3.4 vue-loader: 15.9.8 (16.8.3) vue-style-loader: 4.1.3 vue-template-es2015-compiler: 1.9.1 vue-tippy: ^6.0.0-alpha.42 => 6.0.0-alpha.43 vuedraggable: ^4.1.0 => 4.1.0 vuex: ^4.0.0-0 => 4.0.2 npmGlobalPackages: @vue/cli: Not Found»>

Steps to reproduce

1. Download a font from Google fonts (I use Quattrocento font)
2. Put the .ttf files in src/styles/fonts
3. Create a css file containing:

1. The font is not loaded and the following message appears in the browser console:

1. If I bypass the vue-cli server and load the font directly from Google, it works. I use:

What is expected?

The font loaded as happens with the same font files in another application not based on Vue.

What is actually happening?

See above the error message. Seems like the vue-cli development server is corrupting the file, like a wrong mime type or a CR LF issue.

Thanks for looking!
mario

The text was updated successfully, but these errors were encountered:

Источник

Webpack: Failed to decode downloaded font: OTS parsing error: invalid version tag #923

Comments

Description

Since v0.6.1, I’m having an issue with the font I’m using. I was on 0.2.1 before.

Expected behavior

The font should be loaded properly and displayed correctly.

Actual behavior

The font is not displayed and an empty rectangle appear in place of the font/icon

Environment

react-scripts@0.6.1
node v4.5.0
npm 2.15.9

Operating system: OSX 10.11.5 El Capitain
Browser and version: Chrome 53.0.2785.116 64b

Reproducible Demo

The text was updated successfully, but these errors were encountered:

Can you provide a full project reproducing this please?

In the meantime you should be able to use the public folder as an escape hatch to handle fonts without Webpack. There is a section in the user guide on the public folder.

I’ve finded the issue.

The fonts was located in public/fonts/ and css in public/css/ . The font was loaded from the css with url(fonts/myfont.woff) so the font should have been placed in public/css/fonts . Stange about this issue though.

Okay this makes sense. We serve index.html as fallback for unrecognised paths cause it usually makes sense in single page apps. So this is what you were getting instead of the font.

thanks @gaearon loving create-react-app

Hello,
Sorry am late, but in case someone runs into a similar error in future.

I encountered the same issue, and after hours of blind trial and errors, this is how I solved the issue:

Foremost, the browser is unable to use the fonts due to poor formats. In this case, Fonts Squirrel comes in handy. Use the generator to to convert your uploaded standardized web fonts.

After downloading the standardized fonts, move the extracted fonts (*.oet, *.ttf, *.woff, *.woff2) to your public folder in the react app. This ensures that the fonts are available to the react server when the app loads during development and as well after build.

Use the @font-face rule included in the fontsquirrel extract to include the fonts in the .svg file.
You should have something close to this in your .svg file

Источник

OTS parsing error #138

Comments

I’m using uicons with jsdelivr. Lately, I’m getting the following errors
dashboard:1 Failed to decode downloaded font: https://cdn.jsdelivr.net/npm/@iconscout/unicons@4.0.0/fonts/line/unicons-6.woff2 dashboard:1 OTS parsing error: invalid sfntVersion: 1936028172 dashboard:1 Failed to decode downloaded font: https://cdn.jsdelivr.net/npm/@iconscout/unicons@4.0.0/fonts/line/unicons-9.woff2 dashboard:1 OTS parsing error: invalid sfntVersion: 4008750 dashboard:1 Failed to decode downloaded font: https://cdn.jsdelivr.net/npm/@iconscout/unicons@4.0.0/fonts/line/unicons-3.woff2 dashboard:1 OTS parsing error: invalid sfntVersion: -369077877 dashboard:1 Failed to decode downloaded font: https://cdn.jsdelivr.net/npm/@iconscout/unicons@4.0.0/fonts/line/unicons-11.woff2 dashboard:1 OTS parsing error: invalid sfntVersion: 1110126000

The text was updated successfully, but these errors were encountered:

hey 7aklhz, any luck with this issue?

nope. still there

thanks. console is just full of warnings. using v3.0.1 for now

Hello. Getting the same in Nuxt and using the URL mentioned on the website:

same problem using integration code recomended by website with vue.

i use
in my index.html

Edit: using v3.0.1 fixed but I dont know what icons I will lose

Same problem — I’m using v4.0.0

same problem v4.0.0

@tarunmangukiya: any news on this please ?

Same problem here.

Any chance of a fix? Sure, it’s not urgent, but because it fills up the console with warnings it makes it easy to miss other warnings.

Still an issue! Please fix

I also have this problem in unicons 4.0.0
I decided to swap version 4 for version 3.
It works well for me:

I’m having the exact same issue with 4.0.1. I’m referencing the CSS and font files locally, but I know the paths and everything are correct because the icons display correctly, yet I get the “OTS parsing error” for all .woff2 fonts.

Same problem. v4.0.0 line
Chrome: » Failed to decode downloaded font: »
Mozilla: «downloadable font: rejected by sanitizer «

Источник