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.
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 know there are already some fixes but none of them seem to work.
I want to use "Helvetica Neue" with font-weight:300 on my site. It all looks good on Desktop but as soon as I switch to android, there seems to be no light fonts.
Here you can see my test at jsbin.com . Feel free to edit around, on my Galaxy S3 and Nexus 4 the fonts all have the same weight.
As you can see I also tried to include roboto and set it to light but that didn't work either (used some more methodes but didn't want to make an extra H1 for every single one).
My testcase:
<h1 class="neue">Does not work</h1>
<h1 class="neueLight">Does not work</h1>
<h1 class="neueLighter">Does not work</h1>
with this CSS:
h1.neue {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
}
h1.neueLight {
font-family: "HelveticaNeue-Light", "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
}
h1.neueLighter {
font-family: "HelveticaNeue-Light", "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: lighter;
}
This worked (only with android 4.2+):
There seem to be no solution on how one can use a specific light font without a font-face import or using google Fonts.
The solution is using sans-serif-light as first font-family font.
The best solution looks like this:
html:
<h1>Headline</h1>
css:
h1 {
font-family: sans-serif-light,"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
}
Helvetica Neue is not available on most devices, including Android (which has a small set of installed fonts).
Regarding Roboto, you seem to be asking for weight 100, but your link element only takes weight 300 into use. And you are referring to the font only in WOFF version, which is not supported by many Android versions.
use font-weight:100
also make sure your font supports different font weight
There seem to be no solution on how one can use a specific light font without a font-face import or using google Fonts.
The solution is using sans-serif-light as first font-family font.
The best solution looks like this:
html:
<h1>Headline</h1>
css:
h1 {
font-family: sans-serif-light,"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
}
Note: this only works with android 4.2+
Here is a nice challenge for those interested:
We knew Roboto font has a thin version, and such font can normally be specified via CSS using font-weight: lighter or weight value less than 400.
With font-weight: 200; font-family: Roboto; rule, we get Firefox on Android to pick the right version of font to display, as well as major desktop browsers (if such font exists).
Chrome on Android has a different idea: it always picks the Roboto regular font.
OK, maybe Chrome doesn't like the syntax, let's try a few alternatives:
font-weight: lighter; font-family: Roboto;
font-family: 'Roboto Thin';
font-weight: 200; font-family: 'Roboto Thin';
Nope, chrome still likes the regular version better.
How about this one?
#font-face {
font-family: "Roboto";
font-weight: 200;
src: local("Roboto-Thin");
}
font-family: Roboto;
font-weight: 200;
Sadly no, as it turned to be a bug, marked as won't fix: http://code.google.com/p/chromium/issues/detail?id=322658
Now, the team did offer an alternative:
#font-face {
font-family: "Roboto";
font-weight: 200;
src: local("sans-serif-thin");
}
font-family: Roboto;
font-weight: 200;
Which sadly doesn't work on our testing devices (OS 4.1.2 with Chrome stable/beta) neither.
Now the elephant in the room is fallback to web font, which, on Chrome beta, does work as they were fixed in http://code.google.com/p/chromium/issues/detail?id=167557
But using a web font fallback for a default system font seem rather weird. Plus it does cause an extra download and delay content displays.
So I wonder if anyone has a better workaround for this problem?
Test cases:
http://jsfiddle.net/4CDYW/13/
http://jsfiddle.net/4CDYW/14/
http://jsfiddle.net/4CDYW/15/
I've used Google Web Fonts, with font-weight 300 and used 'Roboto' as the font name and not had a problem:
From http://www.google.com/fonts
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
My mistakes: Roboto Thin does not actually exists on android 4.1 (to be honest i am not sure whether it's in 4.4, as no doc mentioned it)
so don't be misguided by http://developer.android.com/design/style/typography.html, the actual font list is in api doc: http://developer.android.com/about/versions/android-4.1.html#Fonts, where Thin is absent.
Now that it's clear only Roboto Light exists, i have tried above solutions again, and the Chromium team's suggestion are the only working solution:
#font-face {
font-family: "Roboto";
font-weight: 200;
src: local("sans-serif-light");
}
font-family: Roboto;
font-weight: 200;
this will get both firefox and chrome to use the right font without any webfont fallback.
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.
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.