Geek Answers Handbook

(How) can I use native Android fonts in a browser, just css without web fonts?

I am trying to create a web application without using web fonts to keep browser requests at an absolute minimum.

At the same time, I am trying to use only “beautiful” thin fonts for headings, etc.

This is basically not a problem: iOS and Mac OS have HelveticaNeue-UltraLight initially, and Windows (Phone) has a Segoe UI indicator (WP).

Fonts do not look the same, but they give the same general style, and I do not need to use a single webfont. All can be addressed directly via css "font-family".

Is there a way to get a similar look on Android? Android has a Roboto Light that perfectly satisfies my requirements, but it seems impossible to simply address this through CSS styles without websites.

+4
source share
3 answers

you can use

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

Each OS tries to use the font from this list in the course. When the browser detects a font present in the system, it will start using it. iOS will use the font "HelveticaNeue-UltraLight" and ignore others. Android will use the "Roboto Light" font ...

+1
source

Using:

font-family: sans-serif-light;

Edit: Apparently, this only works on HTC devices. But this is the beginning.

Edit2: , Google Android 4.4, Nexus 7. .

+1

Download Robotoand link to it in css as follows:

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

More articles:


All Articles