14

Font-face does not work for me in Windows Phone 8 with Cordova/Phonegap.

Using the stock Cordova WP8 template, I added a simple font-face definition and set * to use that font OR wingdings (to be extra clear that it's not working).

html

The file is in the /fonts folder, set to build as "Content" and "Copy Always".

fontlocation

(wow that image is huge)

If I run this in Chrome, it loads the font properly:

font works in chrome

Even if I run it in IE10 (or in IE9 Mode), it loads the font properly:

font works in IE10

But, if I run it on the Windows Phone 8 Simulator, I get wingdings:

windowsphone8simulator

Any ideas? Workarounds? Should I just go ahead and jump off a bridge?

UPDATE:

Someone suggested using WOFF font format instead, so I went to http://www.font2web.com/ and converted my TTF font. I copied the new files into my www/fonts/ folder. As before, I made sure the "Build Action" is set to Content and Copy Always.

Also, I read something about trying to load the fonts after the deviceReady event fires. Worth a try... can't hurt anything.

Here's the css file called `fonts.css' that defines a new font-face with all the possible combinations:

new css

Then, I edited the stock js/index.js and added some script to dynamically load the new fonts.css into the DOM after deviceReady:

deviceReady

BTW: loadjscssfile() is a little script I got from http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml to load the contents of the fonts.css file into the DOM.

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.

Byron Sommardahl
  • 12,743
  • 15
  • 74
  • 131
  • Could you try and load the page in the default browser and see what you get? The WebView will probably use the same engine as the browser so if it doesn't work there it won't work in the app. – codemonkey Jan 30 '13 at 17:13
  • I tried everything described in your post, and also tried base64 encoding the font. This worked in the browser as usual but not on the device. – andy Sep 25 '13 at 10:03
  • solution: http://stackoverflow.com/questions/14558331/getting-a-web-font-to-work-on-an-html5-windows-phone-app/20573678#20573678 – andy Jul 31 '15 at 13:57

4 Answers4

10

Font-face defined in css won't work if css is stored locally (IsolatedStorage or XAP content). I had similar issue and here is response from WP WebBrowserControl team:

This is a known issue and unfortunately there is no known workaround other than hosting the page and resources remotely.

So as a workaround you can try to host your css and html file on remote site but I understand that is not ideal.

EDIT

I've also tried the following - load font to wp8 silverlight app so it could be recognized by name (as other preloaded fonts) and this worked for silverlight ui - I could refer to this new font by name from xaml, but this unfortunately didn't work for webbrowser content.

Sergei Grebnov
  • 2,633
  • 18
  • 24
  • 3
    Are you kidding me? Which kind of engineering is that? Never saw this kind of thing in my life.. – José Leal Mar 07 '13 at 14:25
  • This doesn't work then for the cordova case =/ Any tips for it? Maybe download and cache the fonts right away? I have around 5 of them in my app and I don't expect the user to always have internet. – José Leal Mar 07 '13 at 14:32
6

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
  • 1
    This works—and not only on WP, but on iOS & Android as well. You don't necessarily need any special conversion that e.g. Fontsquirrel offers; for example output from PHP: `base64_encode(file_get_contents('font.ttf'))` will suffice. And the relevant css-code for the lazy: `src: url(data:font/ttf;charset=utf-8;base64,`data`) format('truetype')` – Jari Keinänen Sep 25 '15 at 13:15
  • 1
    @JariKeinänen your `font/ttf` mime type doesn't exist. It would be: `application/x-font-ttf` for TTF fonts and `application/vnd.ms-fontobject` for EOT. – andreszs Jan 26 '18 at 16:19
  • 1
    @andreszs :) You were right at the time I made the comment (2015) But nowadays [IANA](https://www.iana.org/assignments/media-types/media-types.xhtml#font) has updated that as a MIME type, they were added around Feb 2017 ([or at least the RFC is dated so](https://tools.ietf.org/html/rfc8081) because it was widely used (albeit then-nonexistent) and "highly intuitive"). +1 for making me check this up. – Jari Keinänen Jan 26 '18 at 18:53
1

Well i had the same issue so my workaround is: I am using sencha touch so i have two separate css files. For icon element i am adding additional class win and to windows css i added 

.list.win {
  background-image: url('data:image/png;base64,IMAGECODE HERE');
}

Well it probably stuped but still it works thats why it workaround because i did not find some thing better

PS: My solution is when you use fonts as icons.

Vova Bilyachat
  • 18,765
  • 4
  • 55
  • 80
0

You can just remove the version of the ttf font :

Getting a web-font to work on an HTML5 Windows Phone App?

This one help me for jQuery Mobile and Ionic framework.

Community
  • 1
  • 1
Kénium
  • 105
  • 1
  • 10