CODEWITHSUNDEEP
androidcsscordovawebfonts
Steven
Steven

Reputation: 19425

Not able to use custom fonts in Phonegap

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:

enter image description here

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.

Upvotes: 1

Views: 1729

Answers (2)

Steven
Steven

Reputation: 19425

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.

Upvotes: 0

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

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/

Upvotes: 1

Related Questions