Font Awesome not displayed on Windows Phone 8

Question

I've got a test site that uses the Font Awesome font for displaying icons.

The icons display fine on my desktop in IE and Chrome, as well as on the iPhone and Andriod mobile devices.

However, the font icons are not being displayed on a Nokia Lumia 920 Windows Phone 8.

I can not figure out what is causing the problem. Other sites with the Font Awesome icon font display correctly on the Nokia Lumia 920 Windows Phone. Therefore there must be something specific to the setup that I have created.

The test site is: http://www-peachtreedata.azurewebsites.net/?page_id=6

Any advice on how to get this to work on the Windows Phone platform would be appreciated.

Solution 1

This is a situation where the observed problem is only a symptom of the real problem. I had the same issue with my own site. But it turned out not to be Windows Phone's problem, but that IIS 7 - 8.1 serve up the wrong MIME type for web font files. Make sure the right MIME types are being served up for your font files, as shown here: Proper MIME type for fonts

Also, if you are using Windows Azure Storage for your fonts, you have to set the MIME type on each file manually. The easiest way to do this for existing files is through one of the many Azure storage front-end editors out there.

HTH

Solution 2

I was able to get my font/icon set to be recognized by Windows Phone 8 using base64. Make sure you use WOFF and TTF fonts as follows (where * are the long base64 strings):

@font-face {
    font-family: 'icomoon-ac';
    src: url(data:application/x-font-woff;charset=utf-8;base64,***) format('woff'),
        url(data:application/x-font-ttf;charset=utf-8;base64,***) format('truetype');
    font-weight: normal;
    font-style: normal;
}

UPDATE: This topic came up again on Hacker News, so let me elaborate my original post here in case it helps others: 1) i only tried icomoon, and 2) i used only 1 embedded font.

I use jqMobi, now called Intel App Framework, to build a mobile website that targets all major mobile browsers. The jqMobi framework includes ~70 icons from icomoon embedded into its ui CSS. I needed a few more, so I initially tried to extend that by making another font file called icomoon-extra, uploading it to http://www.motobit.com/util/base64-decoder-encoder.asp to produce the base64 string and adding another @font-face to the jqMobi CSS. That didn't work for me, so i simply created a new icomoon-ac file that includes most of the original icons from the jqMobi icomoon selection, plus another ~30 or so icons that i needed. Now, i just use my icomoon-ac font in the framework and it works. Again, just 1 embedded font.

Solution 3

CSS @font-face does not work reliably in Windows Phone IE.

Icon fonts such as Font Awesome rely upon loading an appropriate font file from a remote server. Apparently, it is not possible to load extra fonts using @font-face on Windows Phone. Depending on the source this is the case for Windows Phone 7 only, or even for version 8:

• Microsoft states that web fonts don't work on 7.1
• This SO thread, and another one reports problems on 7.5, but may be a hint towards possible solutions
• In the comments of this post, it is stated that even Base64 encoded fonts don't work in an emulator. If I find the time, I will test this on a real phone (7.5).
• Even modernizr has some problems with this

A sidenote: On my Windows Phone, microsoft.com is displayed with Tahoma, the second font in the stack:

 font-family: wf_SegoeUI, Tahoma, Verdana, Arial, sans-serif;

Funny, since Windows phone has a local copy of Segoe UI available. I wonder why the web folks at MS don't put that second in the stack...

Solution 4

Okay, this is what worked for me on IIS7.5. I had to add MIME types .otf, .svg and .woff to IIS as they did not exist yet. To add a new MIME type goto IIS, click MIME types module, right-click and choose Add...

    .eot -> application/vnd.ms-fontobject
    .otf -> application/font-sfnt
    .svg -> image/svg+xml
    .ttf -> application/font-sfnt
    .woff -> application/font-woff

Solution 5

This may be fixed in 8.1 Update:

"As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer on Windows Phone allows cross-origin font loading regardless of access control headers for improved compatibility with existing sites" [1]

View more solutions

Comments

[PW Kad]

Is there anything that can be done to request this support? Really surprised (not really surprised, kind of getting use to it) to be using all Microsoft technology and it doesn't support stuff that everyone else does...

[bhell]

I have no idea how one should ask M$, but this is certainly not the only thing where the IE on my 7.5 is crippled.

[carrabino]

Thank you very much for posting this ... i can confirm that the issue still exists with WP8 (HTC 8x). I've been experiencing the exact same issue in trying to load 2 base64 web fonts (2 lines of @Font-face in my css, plus the definitions). WP8/ie doesn't recognize both fonts, it works with just one. In my case, i've been working with icomoon (icomoon.io/#icons)

[bhell]

Great, thanks! Do you have an URL which I could test with my WP 7.5?

[carrabino]

please email me privately (my email is listed on my SO profile) and i'll send you a link to the mobile site so you can test the fonts firsthand.

[bhell]

I checked Anthony's page with my Nokia Windows Phone 7.5 IE, and the embedded font does not display correctly. What I see instead of the icomoon icons are the placeholder characters shown if some letter in a font is missing.

[carrabino]

Good to know and thanks for following up. FWIW, please note that the original question was looking to support "Windows Phone 8", not Windows Phone 7.5.

[Theo]

This is the solution to this problem. It's not a Windows Phone problem, as I originally thought. Instead it was an issue with the MIME type not being set correctly on the server.

[Adam]

@RichardWest which MIME types did you end up changing to what to get this to work? Did you use application/font-woff? And on which types? Thanks!