(How) can I use native Android fonts in the browser simply by css without web fonts?

Question

I'm trying to make a web app without the use of web fonts to keep browser requests at an absolute minimum.

At the same time, I'm trying to use only "good-looking" slim fonts for Headings etc.

This is basically no problem: iOS and Mac OS have HelveticaNeue-UltraLight natively, and Windows (Phone) has Segoe UI (WP) Light.

The fonts do not look the same, but they give a similar overall style and I don't have to use a single webfont. All can be addressed directly via css "font-family".

Is there a way to get a similar appearance on Android? Android has Roboto Light, which would perfectly serve my requirements, but it seems impossible to simply address this via css styles without webfonts.

Question answered here: http://stackoverflow.com/a/22555625/981555 — Mahendran, Jun 17 '16 at 09:56

score 2 · Answer 1 · answered Oct 18 '13 at 09:08

2

You can use

font-family: "HelveticaNeue-UltraLight", "Segoe UI", "Roboto Light", sans-serif;

Each OS try use font from this list in course. When the browser finds a font that is present in the system, it will start to use it. iOS will use the font "HelveticaNeue-UltraLight" and ignore other. Android will use the font "Roboto Light" ...

answered Oct 18 '13 at 09:08

Anon

2,854
14
18

Thanks for your answer! ... But I have tried exactly this, and it does not work. At least not on my Nexus 7 and HTC One (I have tried different browsers on both of them). Unfortunately, Android just uses its default sans-serif font. – tomcat Oct 18 '13 at 09:37
You must know the exact name of the font in the system. The above is just an example – Anon Oct 18 '13 at 09:38
1

Yes I know that, I have researched and tried different font names that I found, but it seems impossible to address Roboto via css. (Unless I explicitly include it from an external resource or as a self-hosted web font ... That seems kind of redundant, since Android already has the font installed ... I just can't use it in the browser.) – tomcat Oct 18 '13 at 09:44
Maby this can help to you http://stackoverflow.com/questions/14631326/use-roboto-font-in-app-with-minimum-api-level-14 or this http://anton.averin.pro/2012/09/12/how-to-use-android-roboto-font-in-honeycomb-and-earlier-versions/ – Anon Oct 21 '13 at 09:25

score 1 · Answer 2 · edited Aug 17 '16 at 16:56

1

Use:

font-family: sans-serif-light;

Edit: Apparently, this only works on HTC devices. But it's a start.

Edit2: Looks like Google has changed this with the recent Android 4.4 update, because now it works on my Nexus 7 as well. Not sure about other devices though.

edited Aug 17 '16 at 16:56

venkatvb

681
1
9
24

answered Oct 21 '13 at 07:58

tomcat

343
3
10

score -5 · Answer 3 · edited Aug 17 '16 at 16:02

-5

Download Roboto and link to it in css like this:

@font-face { 
  font-family: 'Roboto Thin';
  src: url('roboto/Roboto-Thin.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

edited Aug 17 '16 at 16:02

venkatvb

681
1
9
24

answered Dec 01 '13 at 00:42

MaxBoden

1

2

I know that, thanks anyway for your answer. My problem is that I want to avoid using css @font-face declarations. This font is installed on every new Android device anyway. So it should be possible to use it WITHOUT having to rely on a web font. But apparently, it is not. (Exception: HTC devices, see my own answer below.) – tomcat Dec 02 '13 at 15:05

(How) can I use native Android fonts in the browser simply by css without web fonts?

3 Answers3