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
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'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.
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.