CODEWITHSUNDEEP
javascriptcsshtmlwindows-phone-8windows-phone
Henry Hoffman
Henry Hoffman

Reputation: 219

Webfont in Windows Phone 8 HTML5 App

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.

Upvotes: 1

Views: 1831

Answers (7)

istvan.halmen
istvan.halmen

Reputation: 3340

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.

Upvotes: 0

thomasforth
thomasforth

Reputation: 675

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.

Upvotes: 2

user2668767
user2668767

Reputation: 1

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.

Upvotes: 0

Wai Seto
Wai Seto

Reputation: 21

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

Upvotes: 0

Lee Stott
Lee Stott

Reputation: 806

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,

Upvotes: 3

girlie_mac
girlie_mac

Reputation: 593

Apparently this is a known issue, and as a workaround, you need to host the fonts in a remote server until this issue is resolved by Microsoft.

Upvotes: 2

Wai Seto
Wai Seto

Reputation: 21

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 (i.e 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

Upvotes: 0

Related Questions