Shopify Dawnテーマ ウェブフォントの適用

記事執筆時点で、Shopify にはNoto serifはあるが、Noto sans はサポートしていないため、これを導入することにした。手順を以下にメモする。

1. /assets フォルダにフォントファイルを入れる

2. /config/settings_schema.jsonを編集

 {
        "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"
      },

の下に以下を追記

{
        "type": "textarea",
        "id": "type_body_jp_font",
        "label": "日本語フォント設定",
        "info": "この欄に入力されたfont-familyをフォント設定に追加します。"
      },

3. /layout/theme.liquid を編集。CSSの :root{~~ の前にウェブフォントを読み込ませる。


      @font-face {
          font-family: "noto-sans";
          src: url("{{ 'NotoSansJP-Regular-Subset.woff2' | asset_url }}") format("woff2");
          font-weight: normal;
      }
      @font-face {
          font-family: "noto-sans";
          src: url("{{ 'NotoSansJP-Bold-Subset.woff2' | asset_url }}") format("woff2");
          font-weight: bold;
      }

さらに、:root {~~} 内の

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

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

{%- unless settings.type_body_jp_font ==blank -%} {{ settings.type_body_jp_font }}, {%- endunless -%}を追加。以下のようにする


        --font-body-family: {{ settings.type_body_font.family }}, {%- unless settings.type_body_jp_font ==blank -%} {{ settings.type_body_jp_font }}, {%- endunless -%} {{ settings.type_body_font.fallback_families }};
        
        --font-heading-family: {{ settings.type_header_font.family }}, {%- unless settings.type_body_jp_font ==blank -%} {{ settings.type_body_jp_font }}, {%- endunless -%} {{ settings.type_header_font.fallback_families }};
        

管理画面の 「テーマ設定」>「タイポグラフィ」に新たに作られた「日本語フォント設定」に

"noto-sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif

を追加。

ただ、これでうまく動いている感じは全くないので、CSSの:root{~~}に、

font-family: "noto-sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;

の記述を書く。

 

参考文献

https://shopify.dev/docs/themes/architecture/settings/fonts#custom-fonts

なお、上記の本は執筆社の直販サイトから購入すると、PDFの電子本も一緒に入手できる。

Hello Shopify Themes Shopifyテーマ開発ガイド|non-standard world株式会社