CODEWITHSUNDEEP
cordovaphonegap-pluginsfont-size
John
John

Reputation: 1003

Custom Font not working in Phonegap

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

Custom Fonts in Android PhoneGap

Phonegap : Custom font is not working

How to add custom font in PhoneGap

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?

Upvotes: 2

Views: 2323

Answers (1)

Shefali Agarwal
Shefali Agarwal

Reputation: 61

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.

Upvotes: 2

Related Questions