【Shopify】ストアのテキストを日本語フォントに編集したい！liquidファイルを編集して全てのテキストを変更してみた

#概要
Shopifyは、カナダ発のECプラットフォームサービスで最近日本でも盛り上がっています。しかし、海外発のサービスであるがゆえに、日本語でのサポートが完全ではありません。

ストアのフォントもその一つで、現状（2022/02時点）では日本語フォントに対応していません。そのため、日本語のフォントを整えたい場合は、liquidファイルに書かれているコードをいじらないといけないという状況です。

フォントの編集方法はいくつか方法がありますが、今回はサイト内の全てのフォントを変更する方法を紹介していきます。

# 【2022/2/24追記】日本語フォントを設定できるアプリをリリースしました

「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。この記事で紹介するようなコード編集は全く必要なく、誰でも簡単に日本語フォントを設定できるようになっています！
コード編集に抵抗感がある方は是非利用してみてください！

https://apps.shopify.com/font-picker-1?locale=ja&from=qiita-jp-font-edit


#フォントの編集方針

今回は、すでに制作しているデモサイトを例に進めていきます。
使用テーマは「**Debut**」です。なお、Shopifyのコードは、テーマによって中身が異なります。
大まかなファイル構造は、同じなので今回紹介する方法を流用することは可能です。

![スクリーンショット 2020-12-02 9.43.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/984163f6-afea-d24f-e9b3-a5c24ab6cdaf.png)

具体的に、どう編集していくかを説明します。

Shopifyでは、`Asset`ディレクトリ内にストアの`CSS`を記述してあるファイルが格納されています。基本的には、この中の`font-family`を全て書き換えていくことになります。
この`CSS`ファイル以外にも、`theme.liquid`ファイルにも一部`font-family`の記述があったので、そこも書き換えます。

![スクリーンショット 2020-12-02 9.48.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/f1bb1965-05e7-c09c-607d-3575b3c8a18b.png)

使用するフォントは、「游ゴシック」です。

それではいきましょう。




#`theme.css`の`font-family`を書き換える

テーマのコード編集画面を開きます。Shopifyの管理画面へ進み、「オンラインストア > テーマ > 現在のテーマ > アクション > コードを編集する」へ進みます。

`Asset`ディレクトリ内の`theme.css`を開きます。

![スクリーンショット 2020-12-02 9.54.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/c49f7c4d-1289-c9cc-dbdb-29c91011fde0.png)

フィイルが開けたら、ファイル内を検索します。ファイル上で`command`+`F`（Windowsの方は、`Ctrl`+`F` ）で検索することができます。検索窓が表示されたら、`font-family`で検索をかけます。

![スクリーンショット 2020-12-02 9.57.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/c64af81b-bdaf-0288-0d28-6e34191c2b8e.png)

ヒットした部分の記述を全て変更していきます。

コードは以下のように書き換えます。フォント表記は[Font-family](https://saruwakakun.com/font-family)メーカーから拝借しました。

```.css
font-family: YuGothic,'Yu Gothic',sans-serif;
```

![スクリーンショット 2020-12-02 10.09.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/a234b34c-39d7-d49b-c81b-10258605841e.png)


検索窓の下矢印をクリックすると、次にヒットした場所に移動するので、この調子で全てのフォントを書き換えます。「Debut」では、おそらく38箇所あるかと思います。

時々`font-family: var(--font-stack-header);`という表記があります。おそらく、`var(--font-stack-header)`で、ストアのカスタマイズ画面でユーザーが設定したフォントを引っ張ってきて反映させているのだと思います。

ここで一旦、「保存する」をクリックし、プレビュー画面でフォントを確認します。Googleデベロッパーツールで、確認すると小見出しなんかは「游ゴシック」が反映されています。

![スクリーンショット 2020-12-02 10.19.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/2e9722ec-a16b-a2be-0536-52aec42637d0.png)

しかし、ファーストビューの見出しや、ナビゲーションメニューのテキストは、「游ゴシック」が反映されていません。

![スクリーンショット 2020-12-02 10.32.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/c308403f-3f2f-d90e-053d-1f99af0ea502.png)

これらの設定は、`theme.liquid`で、変更していきます。




#`theme.liquid`の`font-family`を書き換える

同じ手順で、`theme.liquid`の`font-family`を書き換えます。`theme.liqid`ファイルを開き、`font-family`を検索します。`<style>`タグ内に`font-family`の記述があるようなので、ここを書き換えます。

![スクリーンショット 2020-12-02 10.48.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/5995b27e-4acb-0f50-1b0f-c43b4df803db.png)

![スクリーンショット 2020-12-02 10.49.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/ca034445-276e-4451-499b-0e8ba776c8d9.png)

もう一箇所あるので、忘れずに変更しておきましょう。

これで、ファイルを保存しプレビュー画面を確認してみましょう。

![スクリーンショット 2020-12-02 10.54.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/b9c3e770-8943-15ba-0b5c-de7037dec9e2.png)

うまくいっていますね。

これでおそらく全てのフォントを変更できているはずです。




#部分的にフォントを編集したい場合

部分的にフォントを編集したい場合は、`theme.css`の一番後ろに追記して上書きしていく方法がベストだと考えられます。
以前会社の方で、記事を書いているのでこちらから。

[【Shopifyマスターへの道】#9 サイトのフォントを編集しよう](https://www.unreact.jp/blog/roadmap-customize-fonts)

**Shopifyマスターへの道**は、Shopifyの構築を網羅的に解説しているシリーズ連載になリます。興味があれば、そちらも覗いてみてください。




#Shopifyで日本語フォントを適用することの問題点

Shopifyで日本語フォントを設定すると、いくつか不便な問題があります。

- 再度フォントを編集する際に、コードを編集しないといけない
- カスタマイズ画面で設定されているはずのフォントがストアには反映されなくなるので、バグのように見える

しっかりと状況をわかっている人がコードを編集したり、ストアのカスタマイズしたりする分には問題ないのですが、構築だけ任されてこのような編集をされるとなかなか変更作業が大変になってしまします。

2つ目に挙げている問題点について、もう少し詳しく解説しておこうと思います。
ストアのカスタマイズ画面をみてみまよう。カスタマイズ画面に入ったら、「テーマ設定 > 文字体裁」へ移動します。

![スクリーンショット 2020-12-02 11.18.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/a91b883f-4c63-8c7b-a82a-98c77aef0af6.png)

![スクリーンショット 2020-12-02 11.19.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/c73cf021-683d-bc4d-22db-c61d16538092.png)

カスタマイズ画面の設定は、フォントに「Helverica」が設定されています。コードを編集する前は、このフォントの設定をファイルで読み込んで設定していたわけです。
しかし、コードを編集してしまっているので、カスタマイズ画面の設定上は、サイトのフォントが「Helvetica」になっているはずなのに、書き換えた「游ゴシック」が適用されているという状況になっています。

![スクリーンショット 2020-12-02 11.20.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/e485e07e-ddc5-5506-040d-590ba657ec89.png)

![スクリーンショット 2020-12-02 11.26.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/5d6f5bed-a08b-4c6a-9fd3-93d8b486d066.png)

これは、保守管理の観点から最悪です。現状日本語フォントは、カスタマイズ画面から設定することができないので、解決策はない
のですが、、、
ストアの構築をもし外注するのなら、保守管理も同じところに頼むしかないという悲しい現実ですね。

Shopify Japanの仕事に期待です。

# 【2022/2/24追記】日本語フォントを設定できるアプリをリリースしました

「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。上記のようなコード編集は全く必要なく、誰でも簡単に日本語フォントを設定できるようになっています！
コード編集に抵抗感がある方は是非利用してみてください！

https://apps.shopify.com/font-picker-1?locale=ja&from=qiita-jp-font-edit


#まとめ

今回は、Shopifyストアの全てのテキストを日本語フォントに変更する手順を解説してみました。

もし、もっと簡単でいい方法知っているよという方がいらっしゃれば、コメントいただけると幸いです。

最後まで読んでいただきありがとうございました。ではまた。