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;
}
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
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 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 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.