title: Using css font-face in a Phonegap Windows Phone 8 app
body: <p>Font-face does not work for me in Windows Phone 8 with Cordova/Phonegap.</p>
  
  <p>Using the stock Cordova WP8 template, I added a simple font-face definition and set <code>*</code> to use that font OR wingdings (to be extra clear that it's not working).</p>
  
  <p><img src="https://i.stack.imgur.com/jCRnk.png" alt="html"></p>
  
  <p>The file is in the <code>/fonts</code> folder, set to build as "Content" and "Copy Always".</p>
  
  <p><img src="https://i.stack.imgur.com/NDfma.png" alt="fontlocation"></p>
  
  <p>(wow that image is huge)</p>
  
  <p>If I run this in Chrome, it loads the font properly: </p>
  
  <p><img src="https://i.stack.imgur.com/W9Dio.png" alt="font works in chrome"></p>
  
  <p>Even if I run it in IE10 (or in IE9 Mode), it loads the font properly:</p>
  
  <p><img src="https://i.stack.imgur.com/pPhc4.png" alt="font works in IE10"></p>
  
  <p>But, if I run it on the Windows Phone 8 Simulator, I get wingdings:</p>
  
  <p><img src="https://i.stack.imgur.com/QQQzp.png" alt="windowsphone8simulator"></p>
  
  <p>Any ideas? Workarounds? Should I just go ahead and jump off a bridge?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Someone suggested using WOFF font format instead, so I went to <a href="http://www.font2web.com/" rel="nofollow noreferrer">http://www.font2web.com/</a> and converted my TTF font. I copied the new files into my <code>www/fonts/</code> folder. As before, I made sure the "Build Action" is set to <code>Content</code> and <code>Copy Always</code>. </p>
  
  <p>Also, I read something about trying to load the fonts after the deviceReady event fires. Worth a try... can't hurt anything. </p>
  
  <p>Here's the css file called `fonts.css' that defines a new font-face with all the possible combinations:</p>
  
  <p><img src="https://i.stack.imgur.com/kD8ff.png" alt="new css"></p>
  
  <p>Then, I edited the stock <code>js/index.js</code> and added some script to dynamically load the new <code>fonts.css</code> into the DOM after deviceReady:</p>
  
  <p><img src="https://i.stack.imgur.com/Yjc4L.png" alt="deviceReady"></p>
  
  <p>BTW: <code>loadjscssfile()</code> is a little script I got from <a href="http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml" rel="nofollow noreferrer">http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml</a> to load the contents of the <code>fonts.css</code> file into the DOM.</p>
  
  <p>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.</p>