Phonegap/Cordova web-fonts with Windows Phone 8

Question

(Possibly a duplicate with Webfont in Windows Phone 8 HTML5 App ... however, particularly Phonegap in question)

I am trying to use a custom web font in my app. It fails to load the font. (Cordova 2.3.0 & Windows Phone 8).

It appears like the css @font-face block is not loaded at all. No luck regardless which font format. Fonts added as 'content' in Build Action.

@font-face {
font-family: "SSPika";
src: url('ss-pika.eot');
src: url('ss-pika.eot?#iefix') format('embedded-opentype'),
   url('ss-pika.woff') format('woff'),
   url('ss-pika.ttf')  format('truetype'),
   url('ss-pika.svg#SSPika') format('svg');
font-weight: normal;
font-style: normal;
} 

And similar to the other question, loading the same content remotely (in iframe) renders perfectly.

Any ideas?

Answer 1

I have searched and found the following post. May be it is related.

Phonegap Windows Phone 7 Dynamic HTML loading and cross-domain calls using jQuery

"If Cordova is not initialized (ie the device ready has not fired), the browser control treats it like a remote get and lands you in to the usual Cross-Origin issue and rejects" This is probably the case for CSS. May be you can try loading CSS dynamically after deviceready event and see what happen.

Answer 2

Potentially this? Windows phone supports web fonts. However, if they are embedded on the XAP they will not work. This is a known issue, the only workaround we know is to host the fonts on a remote server and perhaps use AppCache to keep the font files locally on the device.