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.

Answer 2

It looks like if you encode the font in base64 and put it directly in the css file, than it works in WP8 app as well.

With web apps like Icomoon or Fontsquirrel you can easily generate the css containing the base64 string.