Custom Font not working in Phonegap

Question

I have spent 5 hrs tried every solution from all the other threads but still it isnt working.

All of those above doesnt help. The custom font works on my Browser on my laptop, but when i package it into an App, it doesnt work. Phonegap 3.7, it doesnt work on any devices, but just laptop browser.

@font-face {
       font-family:'AppleMyungjo';
 src: url("/font/AppleMyungjo.ttf");
      src:url("/font/AppleMyungjo.ttf") format("truetype");
        }

#open{
    position:absolute;
    margin-left:1%;
color:white;
    top:10%;
        font-size: 150%;

font-family: 'AppleMyungjo';
    font-weight: lighter;
    text-shadow: none;

}

I checked the log i have an error file:///font/AppleMyungjo.ttf Failed to load resource: net::ERR_FILE_NOT_FOUND

But i do have a folder called font with the ttf inside it. ttf like this right? enter image description here

I just tried referencing all these still not working

 @font-face {
       font-family:'AppleMyungjo';
 src: url("/font/AppleMyungjo.ttf");
           src:url("/css/font/AppleMyungjo.ttf") format("opentype");
          src:url("/css/font/AppleMyungjo.ttf") format("truetype");
           src:url("../font/AppleMyungjo.ttf") format("opentype");
          src:url("../font/AppleMyungjo.ttf") format("truetype");

      src:url("../css/font/AppleMyungjo.ttf") format("opentype");
          src:url("../css/font/AppleMyungjo.ttf") format("truetype");  }

Failed to decode downloaded font: What should i do?

http://stackoverflow.com/questions/23729035/how-to-embed-font-style-in-android-mobile/23730255#23730255 — Mohammed Imran N, Jul 20 '15 at 09:21
I managed to find out the reason, the tff is for some reason corrupted. Thanks for trying to help — John, Jul 20 '15 at 16:16

score 2 · Answer 1 · answered Mar 25 '16 at 11:55

Try this: The problem was with the path it was taking when the font was given through an external css file. To resolve this, declare the font URL inline in the body of index.html

<div>
      <style scoped>
        @font-face {
          font-family: Monotype Corsiva;
          src: url('fonts/Monotype_Corsiva.ttf') format('truetype');
        }
      </style>
</div>

It worked after declaring the font URL in this manner.

Custom Font not working in Phonegap

1 Answers1