14

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.

1

3 Answers 3

23

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> 
Sign up to request clarification or add additional context in comments.

2 Comments

It solves the problem, but what actually nonFilteredFileExtensions do to solve this problem?
I'm trying to use frontend-maven-plugin with reactjs. This solved my problem , thanks.
2

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

to binaryMimeTypes.

5 Comments

this helped me for an express-based application running on AWS Lambda.
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
@BenClayton Could you clarify where you add this specifically?
@ShivamAgrawal where did you add this?
@qarthandso we were using serverless-http library in a javascript lamda. In the root javascript file we use: module.exports.server = serverless(app, { binary: binaryMimeTypes});
1

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.