Style variationとfont family

検査 variation

default で以下のテキストが、rye になる事を確認

hands に変更して、以下のテキストが、fallback font sans-serif になる事を確認

test

style variationで、新しいフォントを指定することはできた。Rye font

課題

段落ブロック等で、variationを他のものに変更すると、font を指定した場合、エディタ側ではフォントが反映するけれど、フロントでは変更されない。

.has-rye-font-family　に対応するCSSがないために発生する。

以下を試したがうまくいかない。

fse.scss うまくいかない

.has-rye-font-family{
    @font-face{
        fontFamily: 'Rye';
        font-style:Normal;
        font-weight: 400;
        font-display:swap;
        src: url('../fonts/Rye/Rye-Regular.woff') format('woff');
    }
    font-family:"Rye2",sans-serif;
    border:1px solid red;
}

theme.jsonでvariationなどで使用するフォントも登録いておく必要がありそうで、まずはそのテストを行う。

テストは、予想通り　動作したけれど

variationでのフォント指定は、theme.jsonで指定したものが、すべて追加されることはなく、variationで定義したフォントだけが適用される。

他のvariationで設定したフォントは、has-rye-font-familyといった形で保持されるけれども、定義されていないのでフォールバックフォントになる。バージョン 15.2.4 

memo

theme.json block cssは、scssのようで、そうではない。セレクターを複製するだけのもの

&{
color:red;
}
& a{
color:green;
}