Getting web fonts to work with phonegap and android - how?

android css cordova webfonts
Joel picture Joel · Apr 17, 2011 · Viewed 11.9k times · Source

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

Answer

Nicklas Gnejs Eriksson picture Nicklas Gnejs Eriksson · Sep 17, 2012

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.

Related questions

Scaling a Phonegap app for different Android screen sizes/densities?

I have a Phonegap app designed to run on Android phones and tablets. The scale of text and images looks fine on a phone, but too small on a 7” tablet. Is there a way to set the scale for different …

Read More
input field hidden when soft keyboard appears in phonegap

Creating a mobile application using Phonegap 3.6.3 for Android and iOS. The problem is only for Android, as iOS acts as I would like it to. When I click on an input text field, or a textarea, a soft keyboard appears. …

Read More
Background-attachment: fixed not working on android/mobile

I'm developing a cordova app and I'm trying to get a fixed background. Unfortunately, it doesn't seem to be working, and anytime I scroll down the background simply goes off the top of the page. Here's the CSS I'm using …

Read More