CSS fonts on Android

Question

I'm using @font-face to display League Gothic on a website, but it's not showing up on Android 1.6. Here's my code, generated with Font Squirrel's @font-face generator

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('/fonts/League_Gothic-webfont.eot');
    src: local('☺'), url('/fonts/League_Gothic-webfont.woff') format('woff'), url('/fonts/League_Gothic-webfont.ttf') format('truetype'), url('/fonts/League_Gothic-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

font-family:'LeagueGothicRegular',Impact,Charcoal,sans-serif;

It's not a big deal if @font-face isn't supported (I read that @font-face support is gone completely in Android 2). But League Gothic is quite condensed, so I would like to specify a better fallback font for Android than the default sans-serif so the design doesn't completely break.

Something like this would be perfect: http://www.droidfonts.com/info/droid-sans-condensed-fonts/

But I can't find a definitive list of the default fonts that come with Android, and the name I should use to reference them in CSS.

EDIT The answers so far missed the point (or I worded the question badly) - what I'm after is a list of system fonts that ship with Android. Something like this for Android.

Solution 1

The fonts that I see installed in my Android (2.2) system files are:

• Clockopia.ttf
• DroidSans-Bold.ttf
• DroidSans.ttf
• DroidSansArabic.ttf
• DroidSansFallback.ttf
• DroidSansHebrew.ttf
• DroidSansMono.ttf
• DroidSansThai.ttf
• DroidSerif-Bold.ttf
• DroidSerif-BoldItalic.ttf
• DroidSerif-Italic.ttf
• DroidSerif-Regular.ttf

Solution 2

I've had the exact same issue trying to get webfonts to work on imeveryone. As of now, there doesn't seem to be anywhere on the internet that states this directly, so I'll do it here:

The 'local()' syntax used to stop IE choking on file formats IE doesn't support also stops Android from loading fonts that Android does support.

Oh dear. But it's easily fixed. The important thing is to ignore the 'Bulletproof Font Face' local IE workaround. It's a neat hack, and shouldn't break Android, but it does, blame Google.

Android does support TTF and OTF files. The proper syntax to support both Android and IE (and every other browser) happy is as follows.

O 1) You need two separate style sheets for fonts, before any regular style sheets:

<link rel="stylesheet" type="text/css" href="/css/fonts.css" />
<!--[if IE]>
    <link rel="stylesheet" href="/css/styleiefonts.css}" type="text/css" charset="utf-8" />
<![endif]-->

O 2) In the normal style sheet, used by Android and most other browsers, don't use the local hack:

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('/static/fonts/League_Gothic-webfont.woff') format('woff'),
        url('/static/fonts/League_Gothic-webfont.ttf') format('truetype'),
        url('/static/fonts/League_Gothic-webfont.svg#webfontOTINA1xY') format('svg');
    font-weight: normal;
    font-style: normal;
}

O 3. In the IE specific style sheet, continue as normal:

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('/static/fonts/League_Gothic-webfont.eot');
}

That's all you need to get working webfonts across all browsers. For now. Someday Google will fix Android and MS will fix IE, so this answer won't apply anymore.

Solution 3

I've heard, but haven't tested myself that the "Mo' Bulletproofer" method developed by Richard Fink works around all these issues (IE and Android) without the need for double stylesheets. The syntax is:

@font-face{ /* for IE */
font-family:'LeagueGothicRegular';
src:url(fishy.eot);
}
@font-face { /* for non-IE */
font-family: 'LeagueGothicRegular';
src:url(http://:/) format("No-IE-404"),url('/fonts/League_Gothic-webfont.woff') format('woff'), url('/fonts/League_Gothic-webfont.ttf') format('truetype'), url('/fonts/League_Gothic-webfont.svg#webfont') format('svg');
}

Hope this helps!