Chapter 05

Part 3 テーマ改修～Shopify のフォントを書き換える～

hiroki

2021.11.30に更新

このチャプターの目次

Shopify でフォントを変更する方法
1. フォントを変更する手順
コードでフォントを書き換える
1. 日本語フォントを部分的に適応させたい場合
2. 日本語フォントをテーマ全体に適応させたい場合

このキャプチャーでは、Shopifyのフォントについて解説します。Shopifyは、まだデフォルトでは日本語のフォントを扱っていません。日本語フォントを対応させる方法や、そもそもフォントは「テーマ設定」の「タイポグラフィー」はどのような方法で対応されているのか見ていきたいと思います。

Shopify でフォントを変更する方法

このセクションでは、Shopifyでノーコードでフォントを変更する方法を解説します。すでに知っている方は飛ばしてもらって大丈夫です。

フォントを変更する手順

オンラインストアの[テーマ]を選択します。
テーマの[カスタマイズ]をクリックしてください。

左下の[テーマの設定]をクリックします。
[タイポグラフィー]をクリックします
[変更]をクリックするとフォントを変更することができます。見出し、本文、メニューやボタン単位で変更できます。(テーマによって異なります)

コードでフォントを書き換える

上記の手順で5番の[変更]をクリックしてもらうと[さらに読み込む]ボタンがあります。
しかし、[さらに読み込む]ボタンをクリックしてもらうとわかるかもしれませんが日本語のフォントは1つもありません。以下の記事でも、以下のように書かれています。

現状（2020/12/02時点）では日本語フォントに対応していません。
https://qiita.com/ta1fukumoto/items/5b9340241412b0e452e8

今回は、コード編集でフォントを游ゴシックに変更します。

日本語フォントを部分的に適応させたい場合

ピンポイントの日本語テキストに日本語フォントを当てたいときに使用する方法です。デベロッパーツールを使用してピンポイントのクラスにfont-familyを指定します。

ストアをプレビューで表示します。
[Ctrl + Shift + I]キーを押して、デベロッパーツールを表示します。
デベロッパーツールの以下のアイコンをクリックしてください。

今回は、フッターのメニューリストを日本語フォントに変更します。

フッターのメニューリストの一部である[検索]をクリックします。
CSSのクラスを確認すると、.footer-block__details-content .list-menu__item--linkですね。これで修正する箇所が確認できました。

せっかく本書でShopify-CLIを導入したのでローカルのファイルから修正します。

Gitの作業をします。mainブランチでの作業はよくないので新規のブランチを作成します。ブランチ名はお任せします。

$ git checkout -b feature-footer-text

作業用のテーマをエディタで開きます。
今回は、[assets]の中の[section-footer.css]を修正します。
428行目にクラスとfont-familyを追加します。
Githubにプッシュして、Shopifyのテーマに反映します。

$ git add .
$ git commit -m "add style footer-menu"
$ git push -u origin feature-footer-text

作成したブランチ名でプルリクが作成できることが確認できます。[Compare & pull request]クリックします。
一旦、プルリクを作成します。
マージして反映させます。本来は、マージするのは作業者とは別の方（コードレビューする人）です。ここでは一人二役にします。
Githubに反映すると自動的にShopifyも修正されているはずです。[コード編集]を確認してみてください。

日本語フォントをテーマ全体に適応させたい場合

游ゴシックをテーマ全体に適応したいと思います。

まず、タイポグラフィーからフォントを変更する方法はどのようになっているのか確認します。

[テーマ設定]の全体の設定は、settings_schema.jsonに記述してあります。
settings_schema.jsonの97行目、118行目にfont_pickerがあります。見出しと本文それぞれのfont_pickerです。font_pickerについてはこちらをご確認ください。

{
    "name": "t:settings_schema.typography.name",
    "settings": [
      {
        "type": "header",
        "content": "t:settings_schema.typography.settings.header__1.content"
      },
      {
        "type": "font_picker",
        "id": "type_header_font",
        "default": "assistant_n4",
        "label": "t:settings_schema.typography.settings.type_header_font.label",
        "info": "t:settings_schema.typography.settings.type_header_font.info"
      },
       *********省*********
      {
        "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値を確認してください。type_header_fontとtype_body_fontです。
[layout]フォルダ内にあるtheme.liquidを確認してください。

{% style %}
      {{ settings.type_body_font | font_face: font_display: 'swap' }}
      {{ body_font_bold | font_face: font_display: 'swap' }}
      {{ body_font_italic | font_face: font_display: 'swap' }}
      {{ body_font_bold_italic | font_face: font_display: 'swap' }}
      {{ settings.type_header_font | font_face: font_display: 'swap' }}

      :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 }};

{{ settings.type_body_font | font_face: font_display: 'swap' }}と{{ settings.type_header_font | font_face: font_display: 'swap' }}を注目してください。先ほど、確認したid値がありますね。id値でsettings_schema.jsonと関連付けています。
{{ settings.type_body_font | font_face: font_display: 'swap' }}と{{ settings.type_header_font | font_face: font_display: 'swap' }}はShopifyでプレビューで表示すると以下のように変換されます。見出しと本文で2つあります。
font_faceフィルターの変換についてはこちらをご確認ください。

      @font-face {
  font-family: "Abril Fatface";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("https://fonts.shopifycdn.com/abril_fatface/abrilfatface_n4.ba1d95cfd327492b9b2e70d2bf6de3283042fdf5.woff2?h1=bWFya2V0LW5ldC5zaG9w&hmac=e1ac0cfdd6bc6a7f05ee227865a1b735473293b2950ba18ee6c87ec21e52bfa4") format("woff2"),
       url("https://fonts.shopifycdn.com/abril_fatface/abrilfatface_n4.15dba6ecd1dbe45e34997dc101cb33f1f43f72dd.woff?h1=bWFya2V0LW5ldC5zaG9w&hmac=2876c17d35d7373816889dd636264e9db2fd47dcd7684bd0c27ab9263e38cead") format("woff");
}
     @font-face {
  font-family: Assistant;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("https://fonts.shopifycdn.com/assistant/assistant_n4.bcd3d09dcb631dec5544b8fb7b154ff234a44630.woff2?h1=bWFya2V0LW5ldC5zaG9w&hmac=599ff2c40b88ca79f6c97f560eedab51c2b48ebaf762087a346f19b074c845c4") format("woff2"),
       url("https://fonts.shopifycdn.com/assistant/assistant_n4.a2d012304becc2a26f1ded1acc136fcab85c9afd.woff?h1=bWFya2V0LW5ldC5zaG9w&hmac=c300492c157be89df8f522a3c732e14a0900fb732c431adb216fe9da8cccf129") format("woff");
}

@font-faceでフォントが反映されるわけではありません。theme.liquidの--font-body-familyと--font-heading-family変数に値をいれることで反映されます。--で始まるものはCSS変数です。CSS変数に関してはこちらの参考にしてください。

: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 }};

上記はShopifyでプレビューするとどのように変換（変数代入）されているのでしょうか。確認してみましょう。

      :root {
        --font-body-family: Assistant, sans-serif;
        --font-body-style: normal;
        --font-body-weight: 400;

        --font-heading-family: "Abril Fatface", serif;
        --font-heading-style: normal;
        --font-heading-weight: 400;

{{ settings.type_body_font.family }},に対してAssistant。{{ settings.type_header_font.family }}に対してAbril Fatfaceが返ってきていますね。
type_body_fontやtype_header_fontのID値の後ろにキーを書くことで@font-face内(６番を確認)のもっとピンポイントの欲しい値を返してくれます。
説明が難しいのでよくわからない方は、フォントオブジェクトについて参考にしてください。
CSSの変数（--）にフォントが適応されると、テーマ全体に反映されるようになっています。

これでタイポグラフィーからフォントを変更する方法が確認できました。ではテーマ全体に日本語フォントを適応していきます。

ここまで説明しておわかりいただけましたでしょうか。テーマ全体に日本語フォントを適応させる方法は、CSSの変数に直接游ゴシックを記述します。
これで上記に書いた

[フォントを変更する手順]で紹介したタイポグラフィーからフォントを変更することができなくなってしまいます。正確には、フォントを変更してもサイトには反映されません。ご注意ください。

の意味が理解できたと思います。游ゴシックをべた書きしてしまうためfont_pickerから入ってきた情報は、CSSの変数に代入されず無視されるということになります。

テーマ全体に日本語フォントを適応する手順

せっかく本書でShopify-CLIを導入したのでローカルのファイルから修正します。

Gitの作業をします。mainブランチでの作業はよくないので新規のブランチを作成します。ブランチ名はお任せします。

$ git checkout -b feature-all-text

作業用のテーマをエディタで開きます。
今回は、[Layout]の中の[theme.liquid]を修正します。
49行目と53行目を以下のように修正します。

  :root {
        --font-body-family: YuGothic,'Yu Gothic', sans-serif;
        --font-body-style: {{ settings.type_body_font.style }};
        --font-body-weight: {{ settings.type_body_font.weight }};

        --font-heading-family: YuGothic,'Yu Gothic', sans-serif;
        --font-heading-style: {{ settings.type_header_font.style }};
        --font-heading-weight: {{ settings.type_header_font.weight }};

Githubにプッシュして、Shopifyのテーマに反映します。

$ git add .
$ git commit -m "add style footer-menu"
$ git push -u origin feature-footer-text

[Compare & pull request]クリックします。
プルリクを作成します。
マージして反映させます。
Githubに反映すると自動的にShopifyも修正されているはずです。[コード編集]を確認してみてください。