Getting web fonts to work with phonegap and androi

问题:

Does PhoneGap support web fonts, and if so how do you use them. I've currently got this code in my page, but it doesn't work when loaded into the emulator (inside an android app, I've not tried loading the page through the browser)...

@font-face {
    font-family: 'HelveticrapRegular';
    src: url('fonts/helveticrap-webfont.eot');
    src: url('fonts/helveticrap-webfont.woff') format('woff'), url('fonts/helveticrap-webfont.ttf') format('truetype'), url('fonts/helveticrap-webfont.svg#webfontHlJ0Jib3') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: "HelveticrapRegular", "Helvetica", "Arial", "sans serif";
}

When I load my page up in firefox, it does work, so I'm not sure what I'm doing wrong.

It may help to say that the font CSS was generated by fontsquirrel

Thanks :) Joel

回答1:

I had a problem with using a custom font in the Woff format. Then I converted it from Woff to Ttf and it worked on my Android device. So there might be a problem with using Woff format.

So, conversion from .woff to .ttf might solve the problem.

回答2:

I've had no problem getting PhoneGap to recognize web fonts. If WebKit will do it then Android and iOS will do it. In a project I'm working on now, currently only tested on Android:

@font-face{
 font-family: MyFont; 
 src: url('../fonts/my_font.ttf') format('truetype');
 src: url('../fonts/my_font.otf') format('opentype');

then on a style as

font-family:MyFont, arial, sans-serif;

回答3:

Webfonts are broken in android 2.1, it's a known bug, unfortunately.