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
Related
After looking at various solutions, like this one, I'm still not able to get Elusive Icons working in Phonegap.
It's working fine on my computer, but once I create the app using Adobe app builder, the web font icons are no longer showing.
My folder structure looks like this:
and my CSS looks like this:
#font-face {
font-family: 'Elusive-Icons';
src: url('../res/fonts/elusive-icons.ttf') format('truetype'),
url('../res/fonts/elusive-icons.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
If anyone has any suggestions to what I can do to fix this, I will greatly appreciate that.
I would suggest embedding the font directly into the CSS file. You can use a site like Gift of speed Base 64 encoder or Opinionated geek Base 64 encoder to Base 64 encode your font. You will then need to modify your CSS file to use this embedded string instead of pointing to the separate font file.
This can be done by changing:
#font-face {
font-family: 'Elusive-Icons';
src: url('../res/fonts/elusive-icons.ttf') format('truetype'),
url('../res/fonts/elusive-icons.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
To:
#font-face {
font-family: 'Elusive-Icons';
src: url('data:application/octet-stream;base64,*Truetype Base 64 encoded string here*') format('truetype'),
url('data:application/octet-stream;base64,*Opentype Base 64 encoded string here*') format('opentype');
font-weight: normal;
font-style: normal;
}
Working JS Fiddle: https://jsfiddle.net/btxdpgvy/1/
After a bit of research, I found this article.
The builder will not copy the files from the res folder, just the ones you link to in the config file.
So by moving the /fonts folder to my css folder, the problem was solved.
I have a text area element that need to be styled to monospace font. I have the font-family set as monospace. However this works on Chrome mobile and desktop, on Android's browser keeps displaying the default font while inputing text until other element get focused.
.content-text, .context-text:focus{
font-family : monospace ;
}
check your #font-face, is it compatible with android?
check this blog post:
http://www.brianhadaway.com/font-face-declarations-on-android-devices/
use code snippet on here or that post to solve the problem.
#font-face {
font-family: 'MyFont';
src: url('MyFont.eot?') format('eot'), url('MyFont.woff') format('woff'), url('MyFont.ttf') format('truetype'), url('MyFont.svg#webfontwTBKaDwa') format('svg');
font-weight: normal;
font-style: normal;
}
I have a phonegap app that uses a custom font declared as such in the css:
#font-face {
font-family: 'NewRockerRegular';
src: url('font/newrocker/NewRocker-Regular-webfont.eot');
src: url('font/newrocker/NewRocker-Regular-webfont.eot?#iefix') format('embedded- opentype'), url('font/newrocker/NewRocker-Regular-webfont.ttf') format('truetype'), url('font/newrocker/NewRocker-Regular-webfont.svg#NewRockerRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: "NewRockerRegular";
}
The app works correctly when testing in Firefox and Chrome.
However when it's compiled into an android app the custom doesn't appear in anything styled with a header tag ( etc)
the font appears correctly on all the body text though.
If you're targeting Android 2.0 or 2.1, it's a known bug in WebView.
You can't use external WebFonts on these platforms.
I implemented an application in Android with PhoneGap. So UI is implemented with jQuery Mobile.
I used CSS font-face for giving custom font to application texts.
#font-face {
font-family: "MyFont";
src: url("../fonts/MyFont.ttf") format("truetype"),
src: url("../fonts/MyFont.otf") format("opentype");
}
body {
font-family: MyFont;
}
But when I install the application on Android, texts are shown by default font face.
How can I solve this problem in Android?
This is a correct syntax that works on android phones:
#font-face {
font-family: 'yanone';
src: url('fonts/yanone/YanoneKaffeesatz-Regular-webfont.eot?') format('eot'),
url('fonts/yanone/YanoneKaffeesatz-Regular-webfont.woff') format('woff'),
url('fonts/yanone/YanoneKaffeesatz-Regular-webfont.ttf') format('truetype'),
url('fonts/yanone/YanoneKaffeesatz-Regular-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
You should also be careful about relative path to your custom font.
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.