@font-face src: local() doesn't work on Android

Question

(Sorry I didn't find it before I figured out Chrome-Android also doesn't work. The Chrome-Android used a fallback-to-sys-default-font-trick and it did trick me)

I was going to use unicode-range but this issue blocked me.

~~I tried desktop(Linux), Firefox-desktop(macOS), Chrome-android and Firefox-android. Most of them work well, but only Firefox-Android doesn't.~~

@font-face works well on Desktop but doesn't on Android.

Here is the Code:

Html

    <p class="test">
        The ellipsis in Chinese should be vertically centered, as it should be centered U+2026, the HORIZONTAL ELLIPSIS character<br>
        “中文省略号应该垂直居中……” <br>
    </p>

Css

@font-face {
    font-family: "CJK Font";
    src: local("Noto Sans CJK SC");
}

.test {
    font-family: "CJK Font";
}

Demo: https://server1.catscarlet.com/demo/case/20220203213000/

I'm using Sony Xperia XZ1(G8342), Android 9 with Firefox Android 96.3.1. The font Noto Sans CJK SC is installed in my phone by default. When @font-face works, the Chinese ellipsis will go vertically centered, but on Firefox-Android, it doesn't, and shows with system-default, which makes the ellipsis matches Roboto before Noto Sans CJK SC.

Screenshots on phone and on firefox remote debugger:

The @font-face url src works fine on Firefox-android, only @font-face local src doesn't.

The strange thing is, @font-face local src works fine on Firefox-PC.

Here is the screenshot on Firefox-PC.

~~Here is the screenshot on Chrome-Android.~~

The Chrome-Android also doesn't work. Chrome-Android tricked me when I set html lang="zh-cmn-Hans", Chrome-Android fallbacked to sys-default-font which also is Noto Sans CJK SC, that made I thought it worked. When set to lang="en" it broke.

~~Is this a bug of Firefox-Android only? Or what else did I do wrong?~~

Answer 1

OK. After one night's research I finally got what the issue really was.

The font I tried to test was Noto Sans CJK, which was installed on Android by default, with ttc format.

I tested other ttf format fonts and then the @font-face started to work.

In the @font-face src: url() way, the ttc format is not supported by design. I guess Firefox-Android uses the same logic even when the font is installed on system locally. Chrome-Android can handle this so I think it is Firefox-Android's fault.

Also, otf format on local system doesn't work on Firefox-Android even through https://caniuse.com/?search=otf says Firefox-Android start to support it at v96.

Temporary conclusion: Firefox-Android can't use ttc or otf fonts with @font-face src: local() even if they are installed on local system, yet