cordova - Using css font-face in a Phonegap Windows Phone 8 app

Question

Font-face does not work for me in Windows Phone 8 with Cordova/Phonegap.

Using the stock Cordova WP8 template, I added a simple font-face definition and set * to use that font OR wingdings (to be extra clear that it's not working).

The file is in the /fonts folder, set to build as "Content" and "Copy Always".

(wow that image is huge)

If I run this in Chrome, it loads the font properly:

Even if I run it in IE10 (or in IE9 Mode), it loads the font properly:

But, if I run it on the Windows Phone 8 Simulator, I get wingdings:

Any ideas? Workarounds? Should I just go ahead and jump off a bridge?

UPDATE:

Someone suggested using WOFF font format instead, so I went to http://www.font2web.com/ and converted my TTF font. I copied the new files into my www/fonts/ folder. As before, I made sure the "Build Action" is set to Content and Copy Always.

Also, I read something about trying to load the fonts after the deviceReady event fires. Worth a try... can't hurt anything.

Here's the css file called `fonts.css' that defines a new font-face with all the possible combinations:

Then, I edited the stock js/index.js and added some script to dynamically load the new fonts.css into the DOM after deviceReady:

BTW: loadjscssfile() is a little script I got from http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml to load the contents of the fonts.css file into the DOM.

I checked it in Internet Explorer 10/9, Chrome, and Firefox. After 3 seconds, the fonts change. I tried it in the Windows Phone 8 simulator. After 3 seconds, wingdings.

Answer 1

Font-face defined in css won't work if css is stored locally (IsolatedStorage or XAP content). I had similar issue and here is response from WP WebBrowserControl team:

This is a known issue and unfortunately there is no known workaround other than hosting the page and resources remotely.

So as a workaround you can try to host your css and html file on remote site but I understand that is not ideal.

EDIT

I've also tried the following - load font to wp8 silverlight app so it could be recognized by name (as other preloaded fonts) and this worked for silverlight ui - I could refer to this new font by name from xaml, but this unfortunately didn't work for webbrowser content.