I can't load fonts while using tomcat

Question

I have such errors while loading fonts when using tomcat:

1 Failed to decode downloaded font: https://my-address.com/css/fonts/robotocondensed-bold-webfont.woff2

1 OTS parsing error: Failed to convert WOFF 2.0 font to SFNT

1 Failed to decode downloaded font: https://my-address.com/css/fonts/robotocondensed-regular-webfont.woff2

1 OTS parsing error: Failed to convert WOFF 2.0 font to SFNT

1 Failed to decode downloaded font: https://my-address.com/css/fonts/fontawesome-webfont.woff2?v=4.3.0

1 OTS parsing error: Failed to convert WOFF 2.0 font to SFNT

1 Failed to decode downloaded font: https://my-address.com/css/fonts/robotocondensed-regular-webfont.woff

1 OTS parsing error: incorrect file size in WOFF header

1 Failed to decode downloaded font: https://my-address.com/css/fonts/robotocondensed-bold-webfont.woff

1 OTS parsing error: incorrect file size in WOFF header

https://fake.com/ Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

1 Failed to decode downloaded font: https://my-address.com/css/fonts/robotocondensed-regular-webfont.ttf

1 OTS parsing error: FFTM: misaligned table

1 Failed to decode downloaded font: https://my-address.com/css/fonts/fontawesome-webfont.woff?v=4.3.0

1 OTS parsing error: incorrect file size in WOFF header

1 Failed to decode downloaded font: https://my-address.com/css/fonts/robotocondensed-bold-webfont.ttf

1 OTS parsing error: GDEF: misaligned table

1 Failed to decode downloaded font: https://my-address.com/css/fonts/fontawesome-webfont.ttf?v=4.3.0

1 OTS parsing error: incorrect entrySelector for table directory

1 Failed to decode downloaded font: https://my-address.com/css/fonts/robotocondensed-light_0-webfont.woff2

1 OTS parsing error: Failed to convert WOFF 2.0 font to SFNT

1 Failed to decode downloaded font: https://my-address.com/css/fonts/robotocondensed-light_0-webfont.woff

1 OTS parsing error: incorrect file size in WOFF header

1 Failed to decode downloaded font: https://my-address.com/css/fonts/robotocondensed-light_0-webfont.ttf

1 OTS parsing error: FFTM: invalid table offset

I don't have this errors when starting from spring-boot. Proper files are in https://my-address.com/css/fonts/ folder. And fonts that should be loaded, aren't displayed correctly. What could I repair to make it works?

Answer 1

If you use maven-resources-plugin to copy webapp static resources (including fonts) with option <filtering>true</filtering> then it could be the reason for corruption of resources.

In such case you can set filtering to false (example):

<plugin>
            <artifactId>maven-resources-plugin</artifactId>
            <version>2.6</version>
            <executions>
                <execution>
                    <id>copy-frontend-resources</id>
                       <phase>process-resources</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <outputDirectory>${basedir}/target/classes/static</outputDirectory>
                        <resources>
                            <resource>
                                <directory>${basedir}/target/build</directory>

                                <filtering>false</filtering> <!-- SET TO FALSE TO PREVENT RESOURCES CORRUPTION -->

                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>

More about maven resource filtering

Another alternative is to exclude resources from filtering (see @eppsilon comment below).

Answer 2

@Mikhail's solution worked for me, but I wanted to keep filtering turned on. I excluded font files from filtering by adding this XML in the <configuration> section for maven-resources-plugin:

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

Answer 3

@Mikhail's solution worked for me as well. But I have used 'maven-war-plugin' to bundle my distribution. Filtering have caused the corruption of font files. Following is my pom file's respective code.

<plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <version>3.2.0</version>
            <configuration>
                <warName>storefront-${version}</warName>
                <warSourceExcludes>portal/**</warSourceExcludes>
                <nonFilteredFileExtensions>
                    <!-- default value contains jpg,jpeg,gif,bmp,png -->
                    <nonFilteredFileExtension>eot</nonFilteredFileExtension>
                    <nonFilteredFileExtension>svg</nonFilteredFileExtension>
                    <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
                    <nonFilteredFileExtension>woff</nonFilteredFileExtension>
                    <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
                </nonFilteredFileExtensions>
                <webResources>
                    <resource>
                        <directory>src/main/webapp/portal/dist</directory>
                        <!-- override the destination directory for this resource -->
                        <targetPath />
                        <!-- enable filtering -->
                        <filtering>true</filtering>
                    </resource>
                    <resource>
                        <directory>src/main/webapp/portal/src/assets</directory>
                        <!-- override the destination directory for this resource -->
                        <targetPath>assets</targetPath>
                        <!-- enable filtering -->
                        <filtering>true</filtering>
                    </resource>
                </webResources>
                <failOnMissingWebXml>false</failOnMissingWebXml>
            </configuration>
        </plugin>