Zenn
🍣

Shopifyの公式テーマで日本語のフォントを使用する

2023/08/13に公開
#
フォント
Shopify
#
日本語
#
themes
tech

はじめに

先日、Shopifyでサイトを構築する機会がありました。游ゴシックや游明朝などを使用したかったのですが、テーマエディターからは日本語のシステムフォントを選択することができません（Noto Sans JPなど、Google Fontsに入っているものは「他のフォント」から選べます）。

欧文系フォントしか選択できない問題

本記事では、コードを直接編集して日本語フォントを使用する方法について書いていきます。Shopifyテーマの仕組みになるべく乗っかることを意識しました。

具体的な編集方法を見たい方は、修正対象のコードを確認からご覧ください。

前提

今回の方法は下記の2点を前提としています。

  • Online Store 2.0に対応したテーマを使う
    2021年8月にShopifyはOnline Store 2.0という大規模なアップデートを行い、テーマの構成も大きく変わりました。本記事でご説明する方法は、Online Store 2.0に対応したテーマが対象となります。Online Store 2.0に対応していない古いテーマでは使用できないためご注意ください。
  • Shopify公式の無料テーマを使う
    本記事ではShopifyが配布している公式の無料テーマを使用しています。公式の無料テーマは全て同じ構造ですが、Shopify以外の販売者が作成したテーマは中身を見ていないので、同じ方法でできるかはちょっとわからないです。

本記事では標準テーマの Dawn を使用しますが、公式のテーマならどれでも大丈夫です。
Shopify公式の無料テーマ一覧はこちらで見ることができます。

やっていく

Shopifyテーマはたくさんのファイルで構成されていますが、今回触るのは theme.liquid の1つだけです。管理画面のコードエディターで見ていきます。

管理画面からコードエディターを開く

ファイルを直接編集するため、以下の手順でコードエディターを開きます。

  1. ストアの管理画面を開き、サイドメニューの オンラインストア をクリック
  2. 編集したいテーマで カスタマイズ をクリックし、テーマエディターを開く
  3. 左上の 「…」 > コードを編集 をクリック
  4. コードエディターが開きました

    コードエディターの画面

修正対象のコードを確認

左側のファイル一覧から、レイアウトフォルダ内のtheme.liquidをクリックしてファイルの編集画面を開きます。

ファイルを開いた状態
85行目あたりに以下の記述があるのを確認します。

レイアウト/theme.liquid
--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-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};

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

この部分のコードでは、テーマエディターのフォントの設定値を呼び出して、CSSのカスタムプロパティ（--font-body-familyとか）に格納しています。頭に--font-bodyとあるものが本文、--font-headingが見出し文に関するものです。ここで定義されたカスタムプロパティは、後続で読み込まれるbase.cssで実際に利用されます。例えばこのように。

アセット/base.css
.text-body {
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}

なお、theme.liquid内にある {{ settings.type_header_font.family }} などの二重カッコは、Liquid言語のオブジェクトです。今回は触らないので詳細は割愛します。

元からある二重カッコの記述を、使いたい日本語フォントの設定値に書き換えることで、サイト内のテキストが日本語フォントで表示されるようになります。次から実際にコードを編集していきます。

コードを編集して日本語フォントを追加する

本文も見出し文も游明朝を指定する想定で書き換えていきます。

1. ファミリーの指定
まずは本文のfont-familyの値です。
"游明朝体"と、予備のフォントでserifを指定します。

/* 修正後 */
+ --font-body-family: "游明朝体", "Yu Mincho", YuMincho, serif;
/* 修正前 */
- --font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};

2. スタイルの指定
特にこだわりがなければnomalを指定しておきます。

/* 修正後 */
+ --font-body-style: nomal;
/* 修正前 */
- --font-body-style: {{ settings.type_body_font.style }};

3. ウェイトの指定
レギュラーの場合は400、ボールドの場合は700といった具合に指定します。

/* 修正後 */
+ --font-body-weight: 400;
/* 修正前 */
- --font-body-weight: {{ settings.type_body_font.weight }};

4. 確認
こんな感じになったかと思います。

--font-body-family: "游明朝体", "Yu Mincho", YuMincho, serif;
--font-body-style: nomal;
--font-body-weight: 400;

見出し文についても同様に書き換えます。

--font-heading-family: "游明朝体", "Yu Mincho", YuMincho, serif;
--font-heading-style: nomal;
--font-heading-weight: 400;

修正が終わったら、コードが表示されているエリアの右上にある 保存 をクリックします。
それでは、実際に反映されたか確認してみます。

表示確認

コードエディターの右上にある ストアをプレビュー をクリックし、プレビュー画面を開きます。
以下の画像は修正前と修正後のプレビュー画面のキャプチャです。

修正前

修正後


サイト内のテキストが游明朝体になっていることが確認できました。

今回は游明朝でしたが、もちろん游ゴシックやヒラギノなども指定できます。ただし、システムフォントの表示はユーザーが利用している端末に依存するのでご注意ください。

おわりに

今回はコードを直接編集することで日本語フォントが使えるようになりましたが、次はテーマエディターで日本語のフォントを選択できるようにしてみたいです。

ご覧いただきありがとうございました。

Discussion