Can anyone tell me what are the bundled fonts on most Android devices, specifically for web pages?
Just like Windows has their bundled fonts or Mac font lists, what are the fonts that come with most Android phones and tablets? Can anyone point to a list on the web?
I'm making web pages and want to set up my CSS to degrade gracefully from using newer fonts to just plain ol' "sans-serif" and "serif" font families. Thx.
Expanding upon Grstmo's answer:
system_fonts.xml defines mapping from font-family to actual font files. So let's try these:
<div style="font-family: sans-serif; font-style: normal">Regular</div>
<div style="font-family: sans-serif; font-style: italic">Italic</div>
<div style="font-family: sans-serif; font-weight: bold">Bold</div>
<div style="font-family: sans-serif; font-weight: bold; font-style: italic">Bold-italic</div>
<div style="font-family: sans-serif-light; font-style: normal">Light</div>
<div style="font-family: sans-serif-light; font-style: italic">Light-italic</div>
<div style="font-family: sans-serif-thin; font-style: normal">Thin</div>
<div style="font-family: sans-serif-thin; font-style: italic">Thin-italic</div>
<div style="font-family: sans-serif-condensed; font-style: normal">Condensed regular</div>
<div style="font-family: sans-serif-condensed; font-style: italic">Condensed italic</div>
<div style="font-family: sans-serif-condensed; font-weight: bold">Condensed bold</div>
<div style="font-family: sans-serif-condensed; font-weight: bold; font-style: italic">Condensed bold-italic</div>
<div style="font-family: serif; font-style: normal">Serif Regular</div>
<div style="font-family: serif; font-style: italic">Serif Italic</div>
<div style="font-family: serif; font-weight: bold">Serif Bold</div>
<div style="font-family: serif; font-weight: bold; font-style: italic">Serif Bold-italic</div>
<!-- "Droid Sans" actually gives you Roboto. -->
<div style="font-family: "Droid Sans"; font-style: normal">Droid Sans Regular</div>
<div style="font-family: "Droid Sans"; font-weight: bold">Droid Sans Bold</div>
<div style="font-family: monospace; font-style: normal">Monospace Regular</div>
http://jsfiddle.net/9z3tD/4/ =>
(tested on android 4.2)
EDIT: "Droid Sans" in the screenshot is clearly Roboto.
The config supports it but turns out the underlying file is a simlink: DroidSans.ttf -> Roboto-Regular.ttf, DroidSans-Bold.ttf -> Roboto-Bold.ttf
EDIT: It doesn't seem to matter whether I quote the family names (http://jsfiddle.net/9z3tD/9/ renders the same). CSS distinguishes between generic keywords like serif and quoted "serif" which refers to a font whose name happens to be "serif"; but the xml config makes no distinction so I guess in android either syntax refers to a font whose name is "serif". But there may be a difference if you create a custom WebView and configure it to map generic keywords to other fonts (setSerifFontFamily() and friends).
Then there are fallback_fonts.xml. These have no names; e.g. you CAN'T say font-family: "Droid Sans Fallback".
But all of them are suppossed to be tried for every missing glyph in other fonts. Presumably one can even choose a subset using font-variant of "elegant" or "compact" and by setting text lang="ja"?
However I don't see Droid Sans Fallback being used at all so perhaps fallbacks don't work in WebKit :-(
Disclaimer: The above applies to stock Android, using stock browser and/or Chrome. I believe it also applies to WebView (with default config) but haven't tested.
In theory manufacturers may use other fonts, e.g. I heard rumors Samsung does it. In practice screenshots on all android devices BrowserStack had all — including Samsungs — look to my untrained eyes to be Roboto or Droid, the differences being just android releases...
However here is Galaxy S3 caught not aliasing Georgia to serif so something differs.
Firefox is a good example of a browser doing it differently — they switched to Open Sans and Charis SIL Compact, then replaced Open Sans with Clear Sans.
The full config is in libpref/init/all.js and is language-dependent.
As far as I can tell, Firefox disregards the system_fonts.xml's aliases, e.g. Georgia results in a sans font.
OTOH, older versions (tested 30, 34) allowed you to refer to system fonts by name, even to Droid Sans Fallback but this doesn't work on FF 36, 37 (these 2 results are for http://codepen.io/cben/pen/VYgPEE, use of AdobeBlank means that when you see chars, that font was used).
See also relevant answer about fonts available to apps.
This has been answered here: How to retrieve a list of available/installed fonts in android?
There are only 3 fonts available as part of Android; normal (Droid Sans), serif (Droid Serif), and monospace (Droid Sans Mono).
From Android 4.1 you can use this for example :
font-family: sans-serif-light;
http://www.granneman.com/webdev/coding/css/fonts-and-formatting/default-fonts/#android
Apparently there's only 3 fonts you can specify on pre 4.0 android:
Droid Sans
Droid Serif
Droid Sans Mono
I guess they translate to the default CSS ones (i.e sans-serif, serif, mono)
As I have been tested for a while, there are 3 standard font-family types for WebView:
serif,
sans-serif,
monospace.
I have been loading like below with JavaScript(I have tried different combinations from http://www.w3schools.com/cssref/css_websafe_fonts.asp - table of commonly used combinations):
myWebView.loadUrl("javascript:document.body.style.fontFamily=\"Impact, Charcoal, sans-serif\";");
so, there was no difernce with below code:
myWebView.loadUrl("javascript:document.body.style.fontFamily=\"sans-serif\";");
I've got the same result. Tested on 4.2.2.
Strange but courier also works, looks like kind of monospace.
Post 4.0 Androïd uses "Roboto" Font.
You can find specs from Androïd here :
http://developer.android.com/design/style/typography.html
Related
The problem is:
Text from HTML file not showing on Android but showing on iOS
I have notice that there is something not showing on my page when I access it on Android devices but showing on iOS Devices. I mean that on iOS Devices only shows the text that needs to be seen by the user, but on Android it shows the whole HTML file (also including the tags).
Maybe in the HTML File is the problem.
Here is the HTML:
<div>
<p style="margin-bottom: 14pt; line-height: normal; font-size: 14pt;"><span style="font-family: Verdana;">The APP</span></p>
<p style="margin-top: 14pt; margin-bottom: 14pt; line-height: normal; font-size: 14pt;"><span style="font-family: Verdana; font-weight: bold;">Date: 12.03.2022</span></p>
i'm live in S.korea and my english is not good
I hope you understand my poor English skills.
my problem is this
Unlike Android 6.0 or later versions, versions differ from version to version.
this is CSS
.box {
width:100px;
}
p {
display: block;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient:vertical;
word-wrap: break-word;
}
.font1 {
font-family: helvetica Neue, sans-serif;
}
.font2 {
font-family: helvetica, sans-serif;
}
this is my code
<div id="test">
<div class="box">
<p class="font1">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
</div>
<div class="box">
<p class="font2">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
</div>
</div>
picture
I know that android is no have helvetica font and android 6.0 verion default font 'Roboto' too.
Q1. font-family: helvetica Neue,sans-serif
- Why is there a 'sans', not a font, like 'sans-serif'?
(picture top)
Q2. is that font Droid??
Q3. font-familiy : sans-serif; is wrong?? if i write just only this , font is serif style, but i need sans-serif font! TT.....
Sorry for Not English well. but i need ur help, beacuse i think S.korean people don't know this problem
Q1. font-family: helvetica Neue,sans-serif - Why is there a 'sans', not a font, like 'sans-serif'? (picture top)
Sans-Serif and Serif are two different categories of font, considering Times New Roman and Arial: Times New Roman is a commonly used serif font, where Arial is a commonly used sans-serif font. (Do I understand your question correctly?)
Q2. is that font Droid??
Droid fonts are totally different fonts by Ascender Corporation. They do have Droid Sans or Droid Serif, but they are a different set of fonts designed for small screens.
Q3. font-familiy : sans-serif; is wrong?? if i write just only this , font is serif style, but i need sans-serif font! TT.....
I think you spell it wrong.. try "family" but not "familiy". Otherwise you may be interested in this example:
jsfiddle.net/dsymbwwg
One more hint for communicating in English, try use Google Translate, you can type your question entirely in Korean and get the English result, paste that to us so that we could better understand your situation. :)
Hope that helps.
So I'm developing a site that'll need to function across a multitude of browsers, be they desktop, mobile, or what have you. The designers, as mac designers will often do, have used Helvetica Neue as the font for the entire site. I'm trying to get it working via #font inclusion, and it's showing up just fine.. but the line-heights are giving me an ulcer.
See the below image, this is Arial, Helvetica Neue Std, and Helvetica Neue Pro. Windows Chrome handles all three like a champ, but the rest here are wildly inconsistent. They're all set to line-height 18px right now, I also tried line-height: 1, but to no avail.
The HTML/CSS I'm using for the purposes of this test:
<style type="text/css">
#font-face { font-family: "Helvetica Neue Std"; src: url( 'HelveticaNeueLTStd-Md.otf' ) format( "opentype" ); }
#font-face { font-family: "Helvetica Neue Pro"; src: url( 'HelveticaNeueLTPro-Md.otf' ) format( "opentype" ); }
.box {
float: left;
padding: 10px;
border: 1px solid red;
font-size: 18px;
line-height: 18px;
}
.box .text_1 { font-family: Arial; }
.box .text_2 { font-family: "Helvetica Neue Std" }
.box .text_3 { font-family: "Helvetica Neue Pro" }
</style>
<div class="box">
<span class="text_1">Aw Nuts</span>
</div>
<div class="box">
<span class="text_2">Aw Nuts</span>
</div>
<div class="box">
<span class="text_3">Aw Nuts</span>
</div>
Am I just out of luck here? I'm considering just using Arial at this point, because trying to make toolbars and buttons where the text is vertically centered is proving to be a nightmare. I certainly don't want to sniff for OS and browser and write custom line-heights for every single element.
This looks like a vertival metrics issue. The font will never align right because it has poor vertical metrics. The only way to make the font render consistently across browsers is to fix its vertical metrics.
Most font providers allow you to update and fix vertical metrics for a font before downloading it. They may call that option differently though. E.g.: Fontsquirrel calls it Auto-Adjust Vertical Metrics, myFonts.com calls it Line Height Adjustments, etc..
Font: poor vertical metrics cause inconsistent line-height rendering across browsers. Solution?
I can offer this in-depth background piece on why line height is a pain.
In summary, different browsers' ways of handling the vertical spacing metrics might be the cause of these inconsistencies. Some calculate from the top of the font's highest ascender and add all line space beneath, while others split the spacing before and after the line of text.
Please try this.
*{
margin: 0px;
padding: 0px;
font-size: 100%;
vertical-align: baseline;
}
font-size: 100% will automatically reset your fonts defaults and you need to manually specify font-size on p a div etc.
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.
I discovered that the following HTML code does not work on Android (it will only use the default font: Droid Sans. On desktop it is working as expected.
<p style='font-family: "Droid Sans",sans-serif;'>vând whisky și tequila, preț fix.</p>
<p style='font-family: "Droid Sans Mono",monospace;'>vând whisky și tequila, preț fix.</p>
<p style='font-family: "Droid Serif",serif;'>vând whisky și tequila, preț fix.</p>
You probably don't have an #font-face declaration for the other typefaces in your css. I imagine you only have one for Droid Sans. You need one for each typeface. For example, in your css you should have:
#font-face {
font-family: 'DroidSans';
src: url('font/DroidSans-webfont.eot?') format('eot'),
url('font/DroidSans-webfont.woff') format('woff'),
url('font/DroidSans-webfont.ttf') format('truetype'),
url('font/DroidSans-webfont.svg#webfontw7zqO19G') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DroidSansMono';
src: url('font/DroidSans-Mono-webfont.eot?') format('eot'),
url('font/DroidSans-Mono-webfont.woff') format('woff'),
url('font/DroidSans-Mono-webfont.ttf') format('truetype'),
url('font/DroidSans-Mono-webfont.svg#webfontSOhoM6aS') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'DroidSerif';
src: url('font/DroidSerif-webfont.eot?') format('eot'),
url('font/DroidSerif-webfont.woff') format('woff'),
url('font/DroidSerif-webfont.ttf') format('truetype'),
url('font/DroidSerif-webfont.svg#webfontw7zqO19G') format('svg');
font-weight: normal;
font-style: normal;
}
And then in your code, your font-family should be the same as those you declared in the css above (i.e. font-family: 'Droid Sans'; is not the same as font-family: 'DroidSans')
<p style='font-family: "DroidSans",sans-serif;'>vând whisky și tequila, preț fix.</p>
<p style='font-family: "DroidSansMono",monospace;'>vând whisky și tequila, preț fix.</p>
<p style='font-family: "DroidSerif",serif;'>vând whisky și tequila, preț fix.</p>
Try it and see how you get on.
It seems Android only recognizes family names defined in system_fonts.xml (fonts.xml up to gingerbread). E.g. to get Droid Serif you're suppossed to write the generic serif. See this answer for details.
Oh, and there is a quirk with 'Droid Sans': that one name is in the config since 4.0 but the .ttf is a symlink to Roboto.
<speculation> I can see how early in Android's life someone said "we're only going to have three fonts so it's better if developers only use generic names, that way we can always replace them" </speculation>
But it's unfortunate. There are many reasons why the actual font you'll get might be different:
Before 4.0 you get the Droid family, after you get the Roboto family.
Firefox is bundling Open Sans and Charis SIL and using those instead.
Manufacturers might replace the 3 fonts with their own. EDIT: I can't find any confirmation this actually happens.
In all these situations it'd be nice if I could reference a specific font by actual name in my font stack. Alas, I can't.