Failed to decode downloaded font как исправить

@font-face {

    font-family:"Lato";

    src: url("../fonts/Lato/");

}


html, body {

    font-family:'Lato';

}

14 ответов:

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

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

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

14 ответов:

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

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

просто измените небольшое изменение здесь от Germano Plebani answer

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

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

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

убедитесь, что ваш сервер отправляет файлы шрифтов с правом mime / type.

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

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

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

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

мне пришлось добавить type=»text/css» в моей ссылке-теге. Я изменил его с:

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

У меня была та же проблема с font awesome v4.4, и я исправил ее, удалив формат woff2. Я получал предупреждение только в Chrome.

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

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

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

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

Edit

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

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

Источник

[loader] Failed to decode downloaded font. OTS parsing error: invalid version tag #1468

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

We are unable to convert the task to an issue at this time. Please try again.

The issue was successfully created but we are unable to update the comment at this time.

I removed all other config and used this:

I hope this helps someone else too.
remember: remove other font test configurations for fonts.

I’m having this same issue, and none of the above seem to work for me.

Not yet, unfortunately :/

Didn’t work neither for woff/woff2 files, but now it’s ok. What I did:

I also re-converted my font files using online convertors, and now it works like a charm.

@Lacroute What is «utils» in your example?

I’d like to share the solution to my problem that’s fairly same as yours for those who google they way out here (like me).

Given my folder structure

The output css file was trying to import font files at the same folder level of it.

The following snippet solved:

Now my font files are properly referenced within my css file.

Источник

Failed to decode downloaded font

This is an error I am getting in Chrome and unfortunately searching for it hasn’t given me much results. The font itself is appearing correctly. However I still get this error/warning. More specifically, this is the full warning:

I just do not understand. The font is applied correctly, but the warning is always there. Trying to use Sans-Serif makes the font revert to the normal browser font, so that may be it, but I am not sure, and even after searching I have found nothing. Thanks!

22 Answers 22

In the css rule you have to add the extension of the file. This example with the deepest support possible:

«Failed to decode downloaded font» means the font is corrupt, or is incomplete (missing metrics, necessary tables, naming records, a million possible things).

Sometimes this problem is caused by the font itself. Google font provides the correct font you need but if font face is necessary i use Transfonter to generate all font format.

Sometimes is the FTP client that corrupt the file (not in this case because is on local pc). Be sure to transfer file in binary and not in ASCII.

I experienced a similar issue in Visual Studio, which was being caused by an incorrect url() path to the font in question.

I stopped getting this error after changing (for instance):

Changing format(‘woff’) to format(‘font-woff’) solves the problem.

Just a little change compared to Germano Plebani’s answer

Please check if your browser sources can open it and what is the type

Make sure your server is sending the font files with the right mime/type.

I recently have the same problem using nginx because some font mime types are missing from its vanilla /etc/nginx/mime.types file.

I fixed the issue adding the missing mime types in the location where I needed them like this:

You can also check this out for extending the mime.types in nginx: extending default nginx mime.types file

I had to add type=»text/css» to my link-tag. I changed it from:

After I changed it the error disappeared.

I just had the same issue and solved it by changing

For me, this error was occuring when I referenced a google font using https. When I switched to http, the error went away. (and yes, I tried it multiple times to confirm that was the cause)

Sometimes this problem happens when you upload/download the fonts using the wrong FTP method. Fonts must be FTP-ed using binary method, not ASCII. (Depending on your mood, it may feel counterintuitive, lol). If you ftp the font files using ASCII method, you can get this error message. If you ftp your files with an ‘auto’ method, and you get this error message, try ftp forcing the binary method.

I was having the same issue with font awesome v4.4 and I fixed it by removing the woff2 format. I was getting a warning in Chrome only.

For me, the mistake was forgetting to put FTP into binary mode before uploading the font files.

Edit

You can test for this by uploading other types of binary data like images. If they also fail to display, then this may be your issue.

In my case, this was caused by creating a SVN patch file that encompassed the addition of the font files. Like so:

The solution was to upload the font files directly into the branch from my local file system. I assume this happened because SVN patch files must convert everything to ASCII format, and don’t necessarily retain binary for font files. But that’s only a guess.

Источник

Failed to decode downloaded font #235

Hi,
I’m using Symfony 3.3 and WebPack for assets management. I’m actually getting issues with fonts which are not decoding properly :

Failed to decode downloaded font: http://website.local/build/fonts/opensans-bold-webfont.ttf (index):1 Failed to decode downloaded font: http://website.local/build/fonts/opensans-regular-webfont.ttf 2(index):1 Failed to decode downloaded font: http://website.local/build/fonts/icomoon.woff 2(index):1 Failed to decode downloaded font: http://website.local/build/fonts/icomoon.ttf

I can’t figure what I’m doing wrong..
Furthermore, I configured exactly the same on a side project with Symfony 4 version, and everything is doing fine.

Here is the actual configuration :

strucure for assets folder :

package.json :

webpack.config.js :

var Encore = require(‘@symfony/webpack-encore’);

Encore
.setOutputPath(‘web/build/’)
.setPublicPath(‘/build’)
.addEntry(‘app’, ‘./assets/js/app.js’)
.enableSassLoader()
.autoProvidejQuery()
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
;

app.scss :

This is imported in app.js file with require(‘../css/app.scss’);

@font-face <
font-family: ‘opensans’;
src: url(‘../fonts/opensans-regular-webfont.woff’) format(‘woff’);
src: url(‘../fonts/opensans-regular-webfont.eot’);
src: url(‘../fonts/opensans-regular-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘../fonts/opensans-regular-webfont.ttf’) format(‘truetype’),
url(‘../fonts/opensans-regular-webfont.svg#open_sansregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
>

@font-face <
font-family: ‘opensans_bold’;
src: url(‘../fonts/opensans-bold-webfont.woff’) format(‘woff’);
src: url(‘../fonts/opensans-bold-webfont.eot’);
src: url(‘../fonts/opensans-bold-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘../fonts/opensans-bold-webfont.ttf’) format(‘truetype’),
url(‘../fonts/opensans-bold-webfont.svg#open_sansbold’) format(‘svg’);
font-weight: bold;
font-style: normal;
>

@font-face <
font-family: ‘icomoon’;
src: url(‘../fonts/icomoon.eot’);
src: url(‘../fonts/icomoon.eot?#iefix’) format(’embedded-opentype’),
url(‘../fonts/icomoon.woff’) format(‘woff’),
url(‘../fonts/icomoon.ttf’) format(‘truetype’),
url(‘../fonts/icomoon.svg#open_sansbold’) format(‘svg’);
font-weight: normal;
font-style: normal;
>

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

We are unable to convert the task to an issue at this time. Please try again.

The issue was successfully created but we are unable to update the comment at this time.

Источник

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:

We are unable to convert the task to an issue at this time. Please try again.

The issue was successfully created but we are unable to update the comment at this time.

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.

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.

Источник