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.
Related
I have html content (combined Persian an English text) with attached css, all css style applied correctly but font.
The css have fontface like this:
#font-face{
font-family: 'BYekan';
font-weight: normal;
font-style: normal;
src: url(../Fonts/BYekan.ttf);
}
the font only applied to english text and not the persian. the font is a standard ttf persian font (BYekan.ttf) so nothings wrong with it.
I googled a lot and almost every body said it's a bug in WebView android > 3.0, the problem still exist in android 4.
https://code.google.com/p/android/issues/detail?id=38536
https://groups.google.com/forum/#!topic/persian-computing/4Fm7JfiOkJk
The only workaround that I found is using svg fonts instead, but this does not work for me either.
Custom font for webview
So how can I solve this?
note1: this question probobly asked alot, like this:
Persian #font-face doesn't work in Chrome, Bug or not?
but it's an old question and the given advice not working anymore (at least for me).
note2: When I open the page in chrome desktop browser font applied correctly.
i have found the workaround
try these font faces
#font-face {
font-family: 'yekan’;
src:url('fonts/yekan.eot?#’) format(‘eot’),
url('fonts/yekan.woff') format('woff'),
url(‘fonts/yekan.ttf’) format(‘truetype’);
}
IMO use SVG font for persian language
I've converted the mentioned font in your question and uploaded it in the following Internet address:
bYekan Web Font Package
Also, You must use the following Style Lines:
#font-face {
font-family: 'BYekan';
src: url('../Fonts/byekan-webfont.eot');
src: url('../Fonts/byekan-webfont.ttf') format('truetype'), url('../Fonts/byekan-webfont.eot?#iefix') format('embedded-opentype'), url('../Fonts/byekan-webfont.woff') format('woff'), url('../Fonts/byekan-webfont.svg#BYekan') format('svg');
font-weight: normal;
font-style: normal;
}
and, you should add the following lines in the .htaccess file:
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
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
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
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.
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.