0

I am hosting my Java webapp with Jetty 9, and I'd like to host the fontawesome icons myself. However I don't see the icons properly (they're square. If I link from the CDN, it works fine

This link works

  <%--<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">--%>

This doesn't

  <link rel="stylesheet" type="text/css" href="../resources/font-awesome-4.3.0/css/font-awesome.min.css"/>

I've tried adding the following to my web.xml

  <mime-mapping>
    <extension>otf</extension>
    <mime-type>application/x-font-opentype</mime-type>
  </mime-mapping>
  <mime-mapping>
    <extension>ttf</extension>
    <mime-type>application/x-font-truetype</mime-type>
  </mime-mapping>
  <mime-mapping>
    <extension>woff</extension>
    <mime-type>application/font-woff</mime-type>
  </mime-mapping>
  <mime-mapping>
    <extension>woff2</extension>
    <mime-type>application/octet-stream</mime-type>
  </mime-mapping>
  <mime-mapping>
    <extension>eot</extension>
    <mime-type>application/vnd.ms-fontobject</mime-type>
  </mime-mapping>
  <mime-mapping>
    <extension>svg</extension>
    <mime-type>image/svg+xml</mime-type>
  </mime-mapping>

All I get from IE is the following

CSS3111: @font-face encountered unknown error. File:
OpenSans-Light.ttf

and Chrome

Failed to decode downloaded font:
localhost:8080/resources/theme-triton/resources/fonts/OpenSans-Light.ttf
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/theme-triton/resources/font-awesome/fonts/fontawesome-webfont.woff2?v=4.3.0
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/theme-triton/resources/fonts/OpenSans-Regular.ttf
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/theme-triton/resources/fonts/OpenSans-Bold.ttf
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/theme-triton/resources/font-awesome/fonts/fontawesome-webfont.woff?v=4.3.0
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/theme-triton/resources/font-awesome/fonts/fontawesome-webfont.ttf?v=4.3.0
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/font-awesome-4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/font-awesome-4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/font-awesome-4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0

Response header

HTTP/1.1 200 OK
Content-Type: application/x-font-truetype
Last-Modified: Sun, 31 May 2015 17:30:12 GMT 
Accept-Ranges: bytes
Content-Length: 359350
Server: Jetty(9.2.10.v20150310)

Request Header

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Cache-Control:no-cache
Connection:keep-alive
Host:localhost:8080
Pragma:no-cache
Referer:localhost:8080/wro/test.css
User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2418.0 Safari/537.36

Can anyone tell me what/where am I doing it wrong?

RealSkeptic
  • 33,993
  • 7
  • 53
  • 79
Wei Yuan
  • 301
  • 2
  • 13
  • Can u put a link where its hosted. Have you checked in Element Inspector that the file is linked correctly as you want it? EDIT: Ok, from your log, I think you have ensured correct linking. Can you still check and confirm once that the css file referred by you in html opens fine on click in Source Code? – Nirav Zaveri May 31 '15 at 19:00

2 Answers2

3

I didn't specify I was using maven to build my project. I just have to specify what file extensions that maven should not filter, if not maven will corrupt the file. It is similar to this answer https://stackoverflow.com/a/31475762/4959062

  <plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <version>2.7</version>
    <configuration>
      <nonFilteredFileExtensions>
        <nonFilteredFileExtension>woff</nonFilteredFileExtension>
        <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
        <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
        <nonFilteredFileExtension>eot</nonFilteredFileExtension>
        <nonFilteredFileExtension>swf</nonFilteredFileExtension>
        <nonFilteredFileExtension>ico</nonFilteredFileExtension>
      </nonFilteredFileExtensions>
    </configuration>
  </plugin>
Community
  • 1
  • 1
Wei Yuan
  • 301
  • 2
  • 13
1

Try delete '?v=4.3.0' suffix in @font-face { } block local's css.

registsys
  • 11
  • 1