Using Noto in CSS without Web Fonts

[code-tree]

My web app will have many different languages and scripts, and I'd prefer not to use Web Fonts, but would like the app to use Noto fonts if they are installed (i.e. for Android users).

How do I specify Noto in a way that covers all scripts? Do I literally need to list all the scripts in the font-family? If so, what order should they appear in (especially in regard to CJK etc)?

I'd also like to use the UI varieties for some elements and regular Noto for others. Does this mean I need to have two different listings of all the scripts?

[KatMomoi]

Marek, please assign this to someone who can help with this question.

[TakenPilot]

I would really like an answer to this question. Doesn't it seem weird to have a project that doesn't say how to use it on the front-page readme?

Should we add documentation in addition to answering this question?

[jungshik]

would like the app to use Noto fonts if they are installed (i.e. for Android users).

Unfortunately, this does not work on Chrome-on-Android. It'll work on Firefox-on-Android. Why? Because Chrome on Android does NOT match font-family names listed in CSS (font-family) against what's available on users' machine. Neither does it match what's specified with 'local(font-family-name)' in the src section of @font-face. It's rather frustrating. A fix is very simple (a couple of lines of changes in Skia will do the job), but there's a disagreement on the merit of this change.

See https://bugs.chromium.org/p/chromium/issues/detail?id=322658

[code-tree]

So if I'm looking in the right place (?), it seems like Chrome-on-Android will end up using Noto as a fallback (and I assume use the Noto fonts in the correct order), however, you can't directly tell it to via font-family or @font-face. Is that correct?

On top of that, Skia lists the UI font variations under a variant="compact" attribute. Is it possible to access that via CSS some how?

Though, it still remains that if I want to avoid downloading Roboto/Noto when on Android, I should avoid specifying them as web fonts completely. Is that also correct?

[jungshik]

(and I assume use the Noto fonts in the correct order)

I don't think there's "the" single correct order. Anyway, for CJK distinction, what you can do is just specify 'sans-serif' (if you only care about Android) and make sure to tag your html document (or a part thereof such as div, span, p, etc) with 'lang=zh-Hans', 'lang=ja', 'lang=zh-Hant', 'lang=ko', etc. Then, Chrome will pick the correct font corresponding to 'lang'.

On top of that, Skia lists the UI font variations under a variant="compact" attribute. Is it possible
to access that via CSS some how?

I heard that CSS4(?) font-module has been considering a new CSS generic family for the UI font. When it's added to Blink, you'll be able to distinguish between 'sans-serif' font for 'body text' (e.g. Noto Sans Devanagari) and 'sans-serif UI' for the UI (Noto Sans Davanagari UI). At the moment, there's no way to pick one over the other via CSS.

[jungshik]

Though, it still remains that if I want to avoid downloading Roboto/Noto when on Android, I should avoid > specifying them as web fonts completely. Is that also correct?

For Roboto, you can specify the following to avoid downloading fonts:

@font-face {
   font-family: Roboto;
   font-weight: .....; 
   src: local(sans-serif), url(.....);
}

For other Noto, local(Noto Sans Devanagari) does NOT work as I mentioned in my previous comment. So, yes, you're right. If you use web fonts, Noto fonts will ALWAYS be downloaded even though they ARE present on user's machine.

[code-tree]

Thanks for clarifying that

make sure to tag your html document (or a part thereof such as div, span, p, etc) with 'lang=zh-Hans', 'lang=ja', 'lang=zh-Hant', 'lang=ko', etc. Then, Chrome will pick the correct font corresponding to 'lang'.

Is this Chrome-specific behaviour, or do other browsers do this (for their own system fonts) as well? I couldn't find much documentation on it.

I don't think there's "the" single correct order.

I see. Is it mainly only CJK order that matters? So if I ensure lang is set correctly for those, then there shouldn't be too much of a problem with any others?

[jungshik]

Is this Chrome-specific behaviour, or do other browsers do this (for their own system fonts) as
well? I couldn't find much documentation on it.

It's not Chrome-specific. There's no requirement in the spec/standard, but modern browsers tend to take into account 'lang' to pick a fallback font. (Firefox certainly does that.).

For other languages (e.g. Indic scripts with shared characters like Danda and Double Danda), I'm afraid Chrome on Android does not take into account to determine which font to use for them. For that, Firefox on Android does better, IIUC.

In Chrome on other platforms, setting the script specific fonts (with a Chrome extension for Advanced font settings linked to in Settings - Advanced - Fonts), end-users can control what fonts are used for what scripts.

[marekjez86]

Thank you @jungshik . @code-tree : sorry for not having a better answer. @TakenPilot : we will have a better documentation.