CODEWITHSUNDEEP
csswindows-phone-8
Richard West
Richard West

Reputation: 2226

Font Awesome not displayed on Windows Phone 8

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.

Upvotes: 18

Views: 17097

Answers (6)

Charles Robertson
Charles Robertson

Reputation: 1820

Similar to the answer by @flo, I can confirm that the following mime types in IIS7.5 on Windows Server 2008R2, correct the problem:

    .eot -> application/octet-stream
    .otf -> application/font-sfnt
    .svg -> image/svg+xml
    .ttf -> application/octet-stream
    .woff -> application/font-woff

Upvotes: 0

robocat
robocat

Reputation: 5433

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]

Upvotes: 1

Adam
Adam

Reputation: 6152

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

Upvotes: 1

Robert McLaws
Robert McLaws

Reputation: 2622

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

Upvotes: 7

carrabino
carrabino

Reputation: 1762

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.

Upvotes: 3

bhell
bhell

Reputation: 1014

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...

Upvotes: 2

Related Questions