（如何）我可以在浏览器中使用原生Android字体，只需使用没有网络字体的CSS？

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.

Answer 1

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

Answer 2

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.

Answer 3

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;
}