33

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.

1

6 Answers 6

33

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: &quot;Droid Sans&quot;; font-style: normal">Droid Sans Regular</div>
<div style="font-family: &quot;Droid Sans&quot;; font-weight: bold">Droid Sans Bold</div>

<div style="font-family: monospace; font-style: normal">Monospace Regular</div>

http://jsfiddle.net/9z3tD/4/ => screenshot on 4.2 (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.

1
3

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

4
  • 2
    Hm, not quite answered yet. That's for apps. What about for web pages? Is it the case that each app has to bundle its own fonts? e.g. So Firefox Mobile would have to embed a default set of TT fonts?
    – Amy
    Jul 25, 2011 at 1:18
  • 3
    From everything that I've read, it looks like the default 3 fonts apply to the Android WebKit browser as well. You should be able to use the CSS @font spec to load a typeface from the web. It's also possible to include TT fonts with your app, in which case you can use them in your activities, or load them into a WebView using a CSS url specification. See: mail-archive.com/[email protected]/… stackoverflow.com/questions/1344080/… stackoverflow.com/questions/5908680/…
    – David
    Jul 26, 2011 at 3:21
  • 2
    From android 4.1 - JellyBean, the following Roboto font families are available: stackoverflow.com/a/13329907/502187
    – user502187
    Dec 16, 2012 at 14:38
  • 4
    No one seems to be answering this question, which is related to web fonts in the Android browser, not fonts for use in an app.
    – skymook
    Sep 23, 2013 at 12:22
3

From Android 4.1 you can use this for example :

font-family: sans-serif-light;

0
1

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)

1

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.

-1

Post 4.0 Androïd uses "Roboto" Font. You can find specs from Androïd here : http://developer.android.com/design/style/typography.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.