CODEWITHSUNDEEP
androidcsscordovafont-facemobile-webkit
Rahul Ramesh
Rahul Ramesh

Reputation: 45

@font-face issues with phonegap on android

I had used a designer font for a <h3> in a PhoneGap application using @font-face in the css file.

I also had to transfer a file to a PHP application on the server using FileTransfer() function in PhoneGap.

The issue was that the file transfer wont work if I have used the designer-font in the page. Has anyone of you ever experienced such a problem?

I'd really like to know if its a bug.

Thanks. :)

Upvotes: 2

Views: 747

Answers (1)

Jonathan Miller
Jonathan Miller

Reputation: 1786

I don't have direct experience with PhoneGap, but I have done quite a bit with @font-face. I'm not sure exactly how you are defining your fonts, but I assume its something like this:

@font-face {
    font-family: 'MyFontName';
    src: url('/path/to/font/MyFontName.ttf') format('truetype')
}

Just thinking out loud but could it be that the FileTransfer() could have messed with the file path that points to where the font lives?

One solution that I can think of that avoids file paths getting messed up is to encode the font (base64 encoded) directly into the CSS... so it would look something like this:

@font-face {
    font-family:"MyFontName";
    src: url(data:font/opentype;base64,d09GRgABAAAAAFL...);
}

I'd give that a try and see if that mitigates the problem.

Upvotes: 1

Related Questions