Font Awesome not displayed on Windows Phone 8

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


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


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.

Tags:

Css

Windows Phone 8

Recent Posts