Font-awesome OTS parsing error: Failed to convert WOFF 2.0 font to SFNT

[bnc8]

I'm getting the following in the Chrome console recently. I'm using the latest parent and child code.

When I click on the font in the console, its there so the paths seem correct and file is on the server, so I wonder if its being treated as a text file in the gulp copy, rather than a binary? Maybe needing something like options: { process: processFiles, noProcess: ['ttf,otf,woff,woff2,eot}']}?

Failed to decode downloaded font:
(index):1 Failed to decode downloaded font: https://blindfoundation.org.nz/wp-content/themes/blindfoundation-understrap/fonts/fontawesome-webfont.woff2?v=4.7.0
(index):1 Failed to decode downloaded font: https://blindfoundation.org.nz/wp-content/themes/blindfoundation-understrap/fonts/fontawesome-webfont.woff2?v=4.7.0
(index):1 Failed to decode downloaded font: https://blindfoundation.org.nz/wp-content/themes/blindfoundation-understrap/fonts/fontawesome-webfont.woff2?v=4.7.0
(index):1 Failed to decode downloaded font: https://blindfoundation.org.nz/wp-content/themes/blindfoundation-understrap/fonts/fontawesome-webfont.woff?v=4.7.0
(index):1 Failed to decode downloaded font: https://blindfoundation.org.nz/wp-content/themes/blindfoundation-understrap/fonts/fontawesome-webfont.woff?v=4.7.0
(index):1 Failed to decode downloaded font: https://blindfoundation.org.nz/wp-content/themes/blindfoundation-understrap/fonts/fontawesome-webfont.woff?v=4.7.0
(index):1 Failed to decode downloaded font: https://blindfoundation.org.nz/wp-content/themes/blindfoundation-understrap/fonts/fontawesome-webfont.woff2?v=4.7.0
(index):1 Failed to decode downloaded font: https://blindfoundation.org.nz/wp-content/themes/blindfoundation-understrap/fonts/fontawesome-webfont.woff?v=4.7.0
3(index):1 OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
3(index):1 OTS parsing error: incorrect file size in WOFF header
(index):1 OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
(index):1 OTS parsing error: incorrect file size in WOFF header

[GuerrillaCoder]

Have you tried setting the mime type on server to font/woff2?

[0dp]

As far as I understand, pipe literally streams a readable source into a writable destination (may that be a task or file or process) and does not care about whats going in or out. So what ever goes in, comes out.

gulp.task('copy', function () {
    gulp.src('src')
        .pipe(gulp.dest('dest'));
});

This demo task is also the preferred method as described in the documentation.

How did you get the files onto the server; is there anything along the path that could have disrupted the encoding or the way the files are read by the server/client?

[bnc8]

Thanks guys, really appreciate the help, and sorry if its not actually a bug but a fault with our process.

We use AWS OpsWorks, which basically pulls the latest from the repo, and then runs gulp styles and then gulp dist and copies the dist directory to the web dir, so I'm not sure if it is doing anything else disruptive in the path, its fairly primitive?

Happy to try setting the mime type to font/woff2, how would I do that?

[GuerrillaCoder]

For apache I think you can add this to .htaccess:

<IfModule mod_mime.c>
    AddType application/vnd.ms-fontobject    .eot
    AddType application/x-font-opentype      .otf
    AddType image/svg+xml                    .svg
    AddType application/x-font-ttf           .ttf
    AddType application/font-woff            .woff
    AddType application/font-woff2           .woff2
</IfModule>

That will set the content-type header.

For nginx I think you can paste this into mime.types file without the surrounding tag and remove AddType from each line.

Obviously this is for all font types, just merge as necessary.

[bnc8]

Thanks, I've added that to nginx and restarted but still get the errors unfortunately

So I redownloaded the understrap child theme, deleted the fonts and replaced them with the source ones from github, but still get the error.

I've also set .gitattributes to force them to binary just in case with:
*.eot binary *.otf binary *.ttf binary *.woff binary *.woff2 binary

At a bit of a loss, as the fonts are there at the url when you click on them in the web page inspector, but just still getting the errors?

[GuerrillaCoder]

Header is set correctly so I guess it's not that.

How are you uploading the files to server? If you are deploying with git you might need to set filetype as binary in gitattributes so it doesnt modify line endings.

[bnc8]

Thanks mate, yes have done that too in .gitattributes

[Thomas-A-Reinert]

From what I read I´d say that this is most definitely not UnderStrap related. For that reason I´ll close that issue. May the force be with you ;)