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