Support variable font for CJK

[WordlessEcho]

What is the user problem or growth opportunity you want to see solved?

Noto Sans CJK support variable font 2 weeks ago. It cost less storage to include all font weight. So I replace system default Noto Sans CJK by myself.
Here is fonts.xml:

    <family lang="zh-Hans">
        <font weight="100" style="normal" index="3">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="100.0" />
        </font>
        <font weight="300" style="normal" index="3">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="300.0" />
        </font>
        <font weight="350" style="normal" index="3">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="350.0" />
        </font>
        <font weight="400" style="normal" index="3">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="400.0" />
        </font>
        <font weight="500" style="normal" index="3">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="500.0" />
        </font>
        <font weight="700" style="normal" index="3">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="700.0" />
        </font>
        <font weight="900" style="normal" index="3">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="900.0" />
        </font>

        <font weight="400" style="normal" index="2" fallbackFor="serif">NotoSerifCJK-Regular.ttc</font>
    </family>
    <family lang="zh-Hant,zh-Bopo">
        <font weight="100" style="normal" index="4">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="100.0" />
        </font>
        <font weight="300" style="normal" index="4">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="300.0" />
        </font>
        <font weight="350" style="normal" index="4">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="350.0" />
        </font>
        <font weight="400" style="normal" index="4">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="400.0" />
        </font>
        <font weight="500" style="normal" index="4">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="500.0" />
        </font>
        <font weight="700" style="normal" index="4">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="700.0" />
        </font>
        <font weight="900" style="normal" index="4">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="900.0" />
        </font>

        <font weight="400" style="normal" index="3" fallbackFor="serif">NotoSerifCJK-Regular.ttc</font>
    </family>
    <family lang="ja">
        <font weight="100" style="normal" index="1">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="100.0" />
        </font>
        <font weight="300" style="normal" index="1">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="300.0" />
        </font>
        <font weight="350" style="normal" index="1">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" value="350.0" />
        </font>
        <font weight="400" style="normal" index="1">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="400.0" />
        </font>
        <font weight="500" style="normal" index="1">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="500.0" />
        </font>
        <font weight="700" style="normal" index="1">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="700.0" />
        </font>
        <font weight="900" style="normal" index="1">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="900.0" />
        </font>

        <font weight="400" style="normal" index="0" fallbackFor="serif">NotoSerifCJK-Regular.ttc</font>
    </family>
    <family lang="ko">
        <font weight="100" style="normal" index="2">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="100.0" />
        </font>
        <font weight="300" style="normal" index="2">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="300.0" />
        </font>
        <font weight="350" style="normal" index="2">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="350.0" />
        </font>
        <font weight="400" style="normal" index="2">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="400.0" />
        </font>
        <font weight="500" style="normal" index="2">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="500.0" />
        </font>
        <font weight="700" style="normal" index="2">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="700.0" />
        </font>
        <font weight="900" style="normal" index="2">NotoSansCJK-VF.otf.ttc
            <axis tag="wght" stylevalue="900.0" />
        </font>

        <font weight="400" style="normal" index="1" fallbackFor="serif">NotoSerifCJK-Regular.ttc</font>
    </family>

It works fine in most apps. But Firefox use the incorrect weight.

This is it should be (Chrome):

How do you know that this problem exists today? Why is this important?

We are pushing AOSP to use variable font version of Noto Sans CJK. ([Feature request] Fix CJK languages display issue with variable font (NotoSansCJK-VF)) I believe AOSP will accept it for a better user experience.

Who will benefit from it?

Users whom use Chinese, Japanese, Korean writing system.

┆Issue is synchronized with this Jira Task

[kbrosnan]

Moved to bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1710512

Change performed by the Move to Bugzilla add-on.