FontAwesome - Failed to decode downloaded font
The problem isn't with your HTML or CSS code... It must be with the font files or the server,
because normal font files should contain codes and can be downloaded when opened in browser like this : https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0
While your files looks empty without any code even when downloaded: http://devcomlink.kunena.dev-monkeys.com/components/com_kunena/template/devcomlink/fonts/font-awesome/fontawesome-webfont.eot?v=4.3.0
Try to replace the files ...
VueJS - Bootstrap icons: Failed to decode downloaded font, invalid sfntVersion
I've found the issue. It was my public
folder that did not contain the fonts with the right path. I added the fonts to the folder with the path as specified in the error and all things works now.
P/S: This might be a temporary workaround, for if there are multiple icon packs and each requires a different font path, the build folder might get overloaded with tons of fonts
folder. Would any one suggest a way to manage this problem?
Failed to decode downloaded font
In the css rule you have to add the extension of the file.
This example with the deepest support possible:
@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 */
}
EDIT:
"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.
Webpack 5 issues with fonts getting Failed to decode & OTS parsing error
tl;dr;
use: {
loader: 'file-loader',
All constructions like the above have to be replaced with the type: asset/resource
(the entire use
block).
Here is an example of what I did to solve the exact same issue on the project I work on.
Before:
{
test: /\.eot(\?v=\d+.\d+.\d+)?$/,
use: [
{
loader: 'url-loader',
options: {
name: '[name].[ext]',
},
},
],
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff',
name: '[name].[ext]',
},
},
],
},
{
test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/octet-stream',
name: '[name].[ext]',
},
},
],
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'image/svg+xml',
name: '[name].[ext]',
},
},
],
},
{
test: /\.(jpe?g|png|gif|ico)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
],
},
After:
{
test: /\.(jpe?g|svg|png|gif|ico|eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/i,
type: 'asset/resource',
},
The file-loader and url-loader have been deprecated and are conflicting with css-loader 6.x.
Consider removing the file-loader
and url-loader
and use the Asset Modules built into Webpack 5.
Another option might be to stick to the css-loader
5.x, but not recommended.
Create React App: Failed to decode downloaded font | OTS parsing error
Files in the src
folder are not directly served by your server. These files are bundled together with the build process first, and any files that are not imported will not end up in the build.
For these types of files, you can place them in the public
folder, and the will end up in the build untouched and can be served by your server.
For more info see the CRA page on the public folder
Related Topics
Form Padding Differences in Firefox and Opera/Chrome/Ie
Jqgrid Zebra/Alt Rows Background Not Working Due to UI Theme Class
-Webkit-Transform-Style: Preserve-3D Not Working
Why Does Box-Sizing: Border-Box Still Show the Border with a Width of 0Px
How to Create a Row of Elements of Equal Width Inside an Inline Container? Possibly Using Flexbox
How to Add 1Px Border to a Div Whose Width Is a Percentage
How to Apply Ckeditor CSS to Output
How to Add Multiple Classes in Material UI Using the Classes Props
How to Make the New Long Shadow Trend with CSS
Bootstrap: Center Some Navbar Items
Background-Position Percentage Not Working
How to Change a Background Image Opacity Without Changing on Div Content
How to Revert Back to Normal After Display:None for Table Row
Asset Pipeline Undefined Variable SASS