記事執筆時点で、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の電子本も一緒に入手できる。
