16

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.

5
  • Looks like this may be fixed in android 2.2 - code.google.com/p/android/issues/detail?id=8655 Commented Jan 6, 2011 at 1:24
  • Bryan: even with Android 2.2 the a bug regarding local() support (often used to work around and IE bug) still breaks Android. See code.google.com/p/android/issues/detail?id=10609. Commented Jan 7, 2011 at 12:42
  • Hey Ben, were you able to use the Droid Fonts without embeding them with your app or on web? just from css, the way you mentioned in the accepted answer? Commented Nov 4, 2011 at 19:40
  • @HossainKhan didn't even try sorry, didn't get that accepted answer until a year later, I'd moved on :P Commented Nov 8, 2011 at 7:16
  • Default font set on Android Commented Nov 18, 2014 at 15:01

3 Answers 3

44

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.

Sign up to request clarification or add additional context in comments.

1 Comment

FYI Trevor I've removed the curly braces, they were just leftovers from a Tornado template.
12

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

2 Comments

For bonus points, any idea what names should be used to reference these fonts in CSS? e.g. font-family:"Droid Sans",sans-serif; or font-family:DroidSans,sans-serif; or something else?
Hey Ben, were you able to use the Droid Fonts without embeding them with your app or on web? just from css, the way you mentioned?
11

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!

2 Comments

I have tested and can confirm this works across all major browsers, including Android 2.2 Thanks Ethan!
@nailer what you think, can i embed another language font like armenian or georgian font like this and show in browser text, which usually is shown by quadrat signs?

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.