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.
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 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'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.
Having a very strange issue on Android 4.x.
The font I'm using will not display the European currency code.
On any iOS and Android 2.x this works fine:
#font-face {
font-family: 'Trade Gothic Bold';
src: url('../../font/tradegothic-bold-webfont.eot');
src: url('../../font/tradegothic-bold-webfont.woff') format('woff'),
url('../../font/tradegothic-bold-webfont.ttf') format('truetype'),
url('../../font/tradegothic-bold-webfont.svg#webfontmlgY0et7') format('svg');
font-weight: normal;
font-style: normal;
}
body{
font-family: 'Trade Gothic Bold', Arial, Helvetica, Geneva, sans-serif;
text-transform: uppercase;
}
Oddly, the Trade Gothic Font appears fine everywhere else on 4.x, even other currency code's are rendered fine (dollars, pounds, etc).
Anyone ever run into this? I'm forcing a fix by detecting the user agent and switching the font to arial, and it renders fine. PM's don't quite believe me when I tell them it's a font problem.
Had a similar issue where the Trade Gothic Font licensed by MyFonts wasn't being picked up at all by Android 4.0.x phones on the native browser (as opposed to Chrome for Android).
Once confirmed that the css was right and the truetype font file was downloaded by the browser, I tried replacing the .ttf file for the same font but from a different provider and it turn out to render the font correctly.
So bear in mind that, at least for this particular font, some binary files might have issues on Android browsers.