※2021.11.11時点の情報です。

Shopifyの標準テーマDawnでは、CSSの変数（カスタムプロパティ）を使用して、フォントサイズやフォントファミリー、背景色などが定義されています。

ただし、Shopifyにおいては、settings_schema.jsonにおいて定義された変数をCSS変数に代入しているので、若干分かりづらいです。

ということでまとめました。

CSS変数（カスタムプロパティ）について理解する

こちらの記事が分かりやすかったです。

CSSで変数（カスタムプロパティ）を使ってみよう

Shopify（Dawn）での定義場所

ここからは、CSSの変数（カスタムプロパティ）について理解している前提で記載します。

Dawnでは、theme.liquidで、以下のように定義されています。

 :root {
        --font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
        --font-body-style: {{ settings.type_body_font.style }};
        --font-body-weight: {{ settings.type_body_font.weight }};

        --font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
        --font-heading-style: {{ settings.type_header_font.style }};
        --font-heading-weight: {{ settings.type_header_font.weight }};

        --color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
        --color-base-background-1: {{ settings.colors_background_1.red }}, {{ settings.colors_background_1.green }}, {{ settings.colors_background_1.blue }};
        --color-base-background-2: {{ settings.colors_background_2.red }}, {{ settings.colors_background_2.green }}, {{ settings.colors_background_2.blue }};
        --color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }}, {{ settings.colors_solid_button_labels.green }}, {{ settings.colors_solid_button_labels.blue }};
        --color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }};
        --color-base-accent-1: {{ settings.colors_accent_1.red }}, {{ settings.colors_accent_1.green }}, {{ settings.colors_accent_1.blue }};
        --color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }};
        --payment-terms-background-color: {{ settings.colors_background_1 }};

        --gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %};
        --gradient-base-background-2: {% if settings.gradient_background_2 != blank %}{{ settings.gradient_background_2 }}{% else %}{{ settings.colors_background_2 }}{% endif %};
        --gradient-base-accent-1: {% if settings.gradient_accent_1 != blank %}{{ settings.gradient_accent_1 }}{% else %}{{ settings.colors_accent_1 }}{% endif %};
        --gradient-base-accent-2: {% if settings.gradient_accent_2 != blank %}{{ settings.gradient_accent_2 }}{% else %}{{ settings.colors_accent_2 }}{% endif %};

        --page-width: {{ settings.page_width | divided_by: 10 }}rem;
        --page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;
      }

一番上のfont-famliyについて見てみましょう。

--font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};

となっています。

--font-body-familyが変数名なのは分かります。

ここからがポイントで、変数に入れている値
{{ settings.type_body_font.fallback_families }}について見ていきましょう。

※ちょっとややこししので、後ろについている{{ settings.type_body_font.fallback_families }}の方はいったん忘れてください。
最後に少し説明します。

{{ settings.type_body_font.fallback_families }}の定義場所

さきほどの変数{{ settings.type_body_font.fallback_families }}は、settings_scheme.jsonの118行目あたりに定義されています。

     {
        "type": "font_picker",
        "id": "type_body_font",
        "default": "assistant_n4",
        "label": "t:settings_schema.typography.settings.type_body_font.label",
        "info": "t:settings_schema.typography.settings.type_body_font.info"
     },

「id」に着目してください。
"id": "type_body_font"となっています。

settings_scheme.jsonで定義された変数は、idで呼び出すことができますので、この場合は「type_body_font」で呼び出すことができます。

設定されているデフォルト値は「assistant_n4」というフォントになります。

結論

結論として、'type_body_font'には'assistant_n4'が入っていますので、

--font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};

の初期値は

--font-body-family: assistant_n4, {{ settings.type_body_font.fallback_families }};

となります。

なお、{{ settings.type_body_font.fallback_families }は何かと言えば、フォールバックフォントを定義しています。

※フォールバックフォントとは、指定されたフォントがデバイスにインストールされていない時に代替で適用されるフォントのことです。

'type_body_font.fallback_families'もsettings_scheme.jsonで定義されているかと思えば、fallback_familiesというテキストは出てきません。

fallback_familiesは、type_body_fontで呼び出したfontオブジェクトのプロパティで、フォールバックフォントファミリーを返します。

このあたりのことはShopifyのリファレンスをご参照ください。

ちょっと分かりにくかったかと思いますが、このあたりを理解しておくと、フォントの変更が一括で出来て便利なので、ぜひ実際に触って覚えてみてください。

もし間違いのご指摘や、ご質問などございましたら、いつでも気軽にご質問お待ちしております。