Develop Reference

fontawesome icons not displaying in Android app

We're coding an Android app using fontawesome icons. Our app works fine with fontawesome icons on iOS but nothing for Android. I tried all sorts of online fixes and none of them worked, and I really don't feel like creating a few hundred different PNG's for each screen resolution.
What do I do? I can't do this: How to use icons and symbols from "Font Awesome" on Native Android Application
The way we're defining it (fontawesome.css):
#font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome/fontawesome-webfont.eot?v=3.2.1');
src: url('fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('fonts/fontawesome/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('fonts/fontawesome/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('fonts/fontawesome/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
With all of our fonts in fonts/fontawesome.
Not a single clue on how to get this working on Android..

try to remove the version paramter ?v=3.2.1
src: url('fonts/fontawesome/fontawesome-webfont.eot');
some old webkit can't recognize the url with paramaters

Android 2.3.X css font-family fallback not working

I currently have an app with a webview. The webview loads css that determines the specific font each devices should use.
For my iOS devices I use HelveticaNeue CondensedBold since it is included with iOS5+. Since I cannot use this for earlier iOS and Android since it is not a system font I am using Googles OpenSans-CondensedBold.
The issue I am running into is on Android devices using 2.3.X. The font-family fallback is not working at all. Since the HelvelticaNeue font isn't present it just fails and doesn't fallback to the OpenSans which is next in line.
font-family: 'OpenSans-CondensedBold', 'Helvetica', 'Arial';
If I remove the HelveticaNeue-CondensedBold from the css in the above example, the OpanSans font works on the Android perfectly.
Current CSS Below.
#font-face {
font-family: 'OpenSans-CondensedBold';
src: url('/webfonts/opensans-condbold.eot');
src: url('/webfonts/opensans-condbold.eot?#iefix') format('embedded-opentype'),
url('/webfonts/opensans-condbold.woff') format('woff'),
url('/webfonts/opensans-condbold.ttf') format('truetype'),
url('/webfonts/opensans-condbold.svg#OpenSans-CondensedBold') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-size: 13px;
font-family: 'HelveticaNeue-CondensedBold', 'OpenSans-CondensedBold', 'Helvetica', 'Arial';
font-weight: normal;
font-style: normal;
}

you could try to encode the font file as base64 data uri.. sencha touch 2 is doing this also and it seems to work.
to do this upload your font file here http://dopiaza.org/tools/datauri/index.php
then use the generated code in your CSS like this
#font-face {
font-family: "My Font";
src: url(data:application/x-font-woff;base64,[base-encoded font here]) format('woff'),
url(data:image/svg+xml;base64,[base-encoded font here]) format('svg'),
url(data:application/x-font-ttf;base64,[base-encoded font here]) format('truetype');
}
in case you're using compass, it appearantly has has a method to encode the font file on the fly
there's a related question also to this method

#font-face Not Working in Chrome for Android

I'm using an #font-face declaration to call a font on a website and it displays in IE, FF, Chrome, even Mobile Safari. However, the font is not displaying in Chrome 18.0.1025308 for Android (4.1.2).
The syntax I'm using is fontspring's bulletproof syntax, and I'm having a real problem determining what is preventing the font from displaying properly.
CSS:
#font-face {
font-family: 'jump_startregular';
src: url('wp-content/uploads/fonts/jstart-webfont.eot');
src: url('wp-content/uploads/fonts/jstart-webfont.eot?#iefix') format('embedded-opentype'),
url('wp-content/uploads/fonts/jstart-webfont.woff') format('woff'),
url('wp-content/uploads/fonts/jstart-webfont.ttf') format('truetype'),
url('wp-content/uploads/fonts/jstart-webfont.svg#jump_startregular') format('svg');
font-weight: normal;
font-style: normal;
}
Any thoughts?

The problem may be related to your font-family declaration (I can't tell because you haven't posted that part). If, for example, you had this:
font-family: fghjkjh, 'jump_startregular', sans-serif;
...Chrome for Android would simply pretend that fghjkjh is installed (but really use the default Android font) and ignore everything else. (Not sure if this is a bug or a feature.)
In which case, the solution is to move 'jump_startregular' to the front - and possibly add a local source to the #font-face block instead, which probably causes problems with other older browsers.

Android 2.3.4 not loading FontSquirrel fonts?

I've been using Pictos and FontSquirrel for fancy dancy icons and typography on our web app. Today I saw that Droid phones and Android 2.3.4 (running on VirtualBox) does not display the font face at all. For the record, Google's own web fonts DO display properly.
Is there a known work around?
#font-face {
font-family: 'Pictos';
src: url('pictos-web.eot');
src: local('☺'), url('pictos-web.woff') format('woff'), url('pictos-web$
font-weight: normal;
font-style: normal;
}

Be advised that the bulletproof and bulletproof smiley methods you're using do not work on Android phones.
Try the Fontspring syntax.
Example:
#font-face {
font-family: 'Pictos';
src: url('pictos-web.eot');
src: url('pictos-web.eot?#iefix') format('embedded-opentype'),
url('pictos-web.woff') format('woff'),
url('pictos-web.ttf') format('truetype'),
url('pictos-web.svg#UbuntuBold') format('svg');
font-weight: normal;
font-style: normal;
}

If eliminating the smiley syntax doesn't work... some browsers on android are rejecting "web-only" fonts. You can run them through the fontsquirrel generator without protection and use the unprotected woff file.

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

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

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.

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;

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