OTS parsing error: Failed to convert WOFF 2.0 font to SFNT for font files of Glyphicon for Spring-boot

Question

When trying to use Glyphicons with Algular inside a Spring-boot Java project created through maven, icons are not shown, and these following errors can be seen in console:

Failed to decode downloaded font: <URL> ..
OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
OTS parsing error: incorrect file size in WOFF header
OTS parsing error: incorrect entrySelector for table directory

There are some solutions around here, but none of them considers Spring-Boot Maven scenario.

Haematocele

check this too - a different filtering exclusion configuration - github.com/google/material-design-icons/issues/908 – Elissa

Answer 1

It seems like Maven build resources somehow corrupts those files and Bootstrap can not decode them anymore properly, resulting in these errors. One workaround I have found is to add nonFilteredFileExtensions in maven-resources-plugin:

<configuration>
    <nonFilteredFileExtensions>
    <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
    <nonFilteredFileExtension>woff</nonFilteredFileExtension>
    <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
    <nonFilteredFileExtension>eot</nonFilteredFileExtension>
    <nonFilteredFileExtension>svg</nonFilteredFileExtension>
    </nonFilteredFileExtensions>
 </configuration>

Here, we can add all extensions of font/icon files that maven is corrupting, and it should solve the issue.

Plugin section should have something like this:

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <configuration>
        <nonFilteredFileExtensions>
            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
            <nonFilteredFileExtension>svg</nonFilteredFileExtension>
        </nonFilteredFileExtensions>
    </configuration>
</plugin>

Haematocele

It solves the problem, but what actually nonFilteredFileExtensions do to solve this problem? – Earring

I'm trying to use frontend-maven-plugin with reactjs. This solved my problem , thanks. – Blythebm

Answer 2

For angular + aws, add this: 'image/svg+xml', 'font/ttf', 'font/woff', 'font/woff2',

to binaryMimeTypes.

Superficies

this helped me for an express-based application running on AWS Lambda. – Kealey

const binaryMimeTypes = ['application/octet-stream',' font/eot', 'font/opentype', 'font/otf', 'image/jpeg', 'image/png', 'image/svg+xml', 'font/ttf', 'font/woff', 'font/woff2'] will be available in lambda.js file – Newspaperman

@BenClayton Could you clarify where you add this specifically? – Maximomaximum

@ShivamAgrawal where did you add this? – Maximomaximum

@Maximomaximum we were using serverless-http library in a javascript lamda. In the root javascript file we use: module.exports.server = serverless(app, { binary: binaryMimeTypes}); – Kealey

Answer 3

In my case, woff2 files cannot be compiled, but replacing them with woff works.

Harmless