[this.emitFile] Corrupted font files (.woff|.woff2|.eot|.ttf) about file-loader

[htokuda10]

Instances with a Java back end using Spring boot and Maven
After an entire day of looking for the reason for the corrupt files in my specific case, I finally found a solutions, and it wasn't file-loader.

If you are running a Java back end with Spring boot and Maven, try adding the following to your pom (adjust appropriately to your directories, sorry about the formatting, Git doesn't want to format this code block, lol)

<build> <resources> <resource> <directory>src/main/resources</directory> <filtering>false</filtering> <includes> <include>static/css/**</include> <include>static/fonts/**</include> <include>static/img/**</include> <include>static/js/**</include> </includes> </resource> <resource> <directory>src/main/resources</directory> <filtering>true</filtering> <excludes> <exclude>static/css/**</exclude> <exclude>static/fonts/**</exclude> <exclude>static/img/**</exclude> <exclude>static/js/**</exclude> </excludes> </resource> </resources> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <configuration> <addResources>false</addResources> </configuration> </plugin> </plugins> </build>

I added multiple directories, for description purposes. The filtering could potentially corrupt binary files. The warning is located at the bottom of this page. https://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html

Hope this helps anyone who had the specific issue that I ran into!

[email2vimalraj]

This solved my issue: http://www.vimalselvam.com/2015/12/19/webpack-loader-for-fonts/

[julesmoretti]

@evilebottnawi can you please reopen this.

I am getting the following:

Failed to decode downloaded font: http://localhost:1234/dist/7ae020399e7233de5b0197bdc40bb9ca.otf
app.html#/diagnostics:1 OTS parsing error: name: table overruns end of file

Using:

export default {
    externals: [
        ...Object.keys(externals || {}),
        ...Object.keys(possibleExternals || {}).filter(filterDepWithoutEntryPoints),
    ],

    module: {
        rules: [
            ...,
            {
                test: /\.(?:ico|proto|png|gif|mp4|m4a|mp3|jpg|svg|ttf|otf|eot|woff|woff2)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[hash].[ext]',
                        emitFile: true,
                    },
                },
            },
        ],
    },

    output: {
        path: path.join(__dirname, 'app'),
        // https://github.com/webpack/webpack/issues/1114
        libraryTarget: 'commonjs2',
    },

[albertoclarit]

i have the same exact issue using http://materializecss.com/

[Swelly]

Same issue here
var fileLoader = 'file-loader?name=[path][name].[ext]';
...
{ test: /\.jpe?g$|\.gif$|\.png$|\.ico|\.svg$|\.woff$|\.ttf$|\.eot$/, loader: fileLoader },

[iam4x]

Same with font-awesome:

{
  test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf)(\?v=[0-9].[0-9].[0-9])?$/,
  loader: 'file?name=[sha512:hash:base64:7].[ext]',
  exclude: /node_modules\/(?!font-awesome)/
}

[dharding]

Try setting the publicPath:

{
  "output": {
    "publicPath": "http://localhost:9000/"
  }
}

This is only necessary for me in dev mode for webpack. The production bundle works fine without it.

[minhtranite]

Same issue.

[minhtranite]

Sorry!. My issue come from shama/webpack-stream#87

[wmadden]

I had the same problem and @dharding is right. I documented what I found on StackOverflow: http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts/34133809#34133809

Hope it helps.

[bogdan-kulyk]

Also have this problem! :(

[email2vimalraj]

Is anyone looking on this problem? I'm also facing this issue.
@dharding : Your solution not works.

[artema]

If anyone is using Webpack with Gulp, this might solve the issue shama/webpack-stream@6169c96

[Roy9102]

Hello, I had write a fontmin-loader to get the font subset

[Roy9102]

Hello, I had write a fontmin-loader to get the font subset https://github.com/Roy9102/FontMin-loader

[cage1618]

I have the same issue, anybody have a solution?

[aladaghlou]

I have this problem in sherenab.com .
Solution ?????

[aspirisen]

Have the same

[hmbadiwe]

It seems that the only thing that works for me is using the url-loader for all fonts.
I don't know what the drawbacks are:

{test: /\.(woff|ttf|eot|svg)(\?v=[a-z0-9]\.[a-z0-9]\.[a-z0-9])?$/, loader: 'url-loader?limit=100000'}

I got this from stack overflow:
http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts

[karolklp]

Drawbacks of using url-loader for all fonts:

• all of the font types has to be downloaded - they're in CSS file, so browser can't just choose the proper one - it has to download all of them
• when browser downloads the desired file format, it's done asynchronously. When you force browser to download it in css, you lose that
• base64 creates size overhead for data

[FlynnLeeGit]

same problem

[alexander-akait]

Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!