Webfont in Windows Phone 8 HTML5 App

Question

I can't get any web fonts to work in my Windows Phone 8 HTML5 Application.

I do the following:

1. Create a new Windows Phone HTML5 App Project
2. Copy my WOFF font (though I've also tried eot and ttf) to the project root, and add it to the project as an existing item
3. Add in this CSS to the index.html file

If anyone could create a template Windows Phone 8 project with simple working local web fonts, I'd be super appreciative. This has got me really stuck.

Answer 1

Windows phone supports web fonts. However, if they are embedded on the XAP they will not work.

Engineering response: This is a known issue, the only workaround we know is to host the fonts on a remote server (making sure to bypass the single origin policy issue) and perhaps use AppCache to keep the font files locally on the device.

Thanks,

Answer 2

显然，这是一个已知问题，并且，作为一种解决方法，您需要在远程服务器中托管字体，直到Microsoft解决此问题为止。

Answer 3

I have been able to use local truetype web fonts in Windows Phone 8 HTML apps with no problems. You must ensure that the embeddable flag within the the font is set to 0 using software such as TTFEdit .

Check out the full answer I gave to a similar stackoverflow question here.

I think this might be better than the accepted answer but I'm a n00b so I can't add a comment to that yet.

Answer 4

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.

NB: Same answer I posted there Phonegap/Cordova web-fonts with Windows Phone 8

Answer 5

I have just noticed in this video. http://channel9.msdn.com/Blogs/Interoperability/Getting-started-with-Windows-Phone-8-and-Cordova At around 4:12, it mentions the build action has to be set to "content" in order for the file to be seen. Not sure if that helps anything, since we already have a report about a bug. :p But I hope it worth sharing anyway. :)

Answer 6

I solved this problem using Cufon http://cufon.shoqolate.com/ . Cufon renders images instead of text, so that is the reason why this works on Windows Phone.

Here is documentation and usage: https://github.com/sorccu/cufon/wiki . I hope this helps.

Answer 7

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.