1

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.

Henry Hoffman
  • 209
  • 1
  • 2
  • 10
  • have you verified that your server understands the woff format via the mime types? Here is a stackoverflow question that addresses IIS Express. http://stackoverflow.com/questions/9021946/add-mime-mapping-in-web-config-for-iis-express – Jeremy Howard Jan 15 '13 at 22:40
  • forget what I wrote. Missed the part where you weren't writing a web app :) – Jeremy Howard Jan 15 '13 at 22:42
  • I am not that familiar with WP8 development and the mobile IE (and his limitations ;)), but you could try to embed the font as a Data URI. – philipproplesch Jan 15 '13 at 23:09
  • Thanks for the feedback, I tried with a Data URI too. All the solutions I've tried have worked when using a remote HTML page in the WebBrowser control, but not locally for some reason. – Henry Hoffman Jan 16 '13 at 10:17
  • Possible duplicate of [how to apply custom font to web browser content WP7](http://stackoverflow.com/questions/14119852/how-to-apply-custom-font-to-web-browser-content-wp7) – Zin Min Oct 22 '16 at 13:10

7 Answers7

3

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,

Lee Stott
  • 761
  • 9
  • 8
2

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.

girlie_mac
  • 593
  • 5
  • 7
2

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.

Community
  • 1
  • 1
thomasforth
  • 665
  • 7
  • 13
  • This is the right answer. I created a repo with a sample app based on @thomasf2811 solution: https://github.com/gabrielmaldi/windows-phone-8-local-font-face – gabrielmaldi Mar 03 '14 at 23:36
0

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

Community
  • 1
  • 1
Wai Seto
  • 21
  • 1
  • The CSS loads fine, it's the font file itself that isn't loading. As mentioned before I tried DATA URIs. I tried loading the CSS dynamically and it didn't make a difference. Thanks for the reply! – Henry Hoffman Jan 23 '13 at 12:20
0

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

Wai Seto
  • 21
  • 1
0

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.

user2668767
  • 1
0

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.

istvan.halmen
  • 3,320
  • 1
  • 23
  • 29