Not able to use custom fonts in Phonegap

Question

After looking at various solutions, like this one, I'm still not able to get Elusive Icons working in Phonegap.

It's working fine on my computer, but once I create the app using Adobe app builder, the web font icons are no longer showing.

My folder structure looks like this:

and my CSS looks like this:

@font-face {
  font-family: 'Elusive-Icons';
  src: url('../res/fonts/elusive-icons.ttf') format('truetype'),
       url('../res/fonts/elusive-icons.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

If anyone has any suggestions to what I can do to fix this, I will greatly appreciate that.

Answer 1

I would suggest embedding the font directly into the CSS file. You can use a site like Gift of speed Base 64 encoder or Opinionated geek Base 64 encoder to Base 64 encode your font. You will then need to modify your CSS file to use this embedded string instead of pointing to the separate font file.

This can be done by changing:

@font-face {
  font-family: 'Elusive-Icons';
  src: url('../res/fonts/elusive-icons.ttf') format('truetype'),
       url('../res/fonts/elusive-icons.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

To:

@font-face {
  font-family: 'Elusive-Icons';
  src: url('data:application/octet-stream;base64,*Truetype Base 64 encoded string here*') format('truetype'),
       url('data:application/octet-stream;base64,*Opentype Base 64 encoded string here*') format('opentype');
  font-weight: normal;
  font-style: normal;
}

Working JS Fiddle: https://jsfiddle.net/btxdpgvy/1/

Answer 2

After a bit of research, I found this article.

The builder will not copy the files from the res folder, just the ones you link to in the config file.

So by moving the /fonts folder to my css folder, the problem was solved.