はじめに
今回の記事は、ShopifyでGoogleフォントや日本語フォントを導入した際の備忘録です。
いくつかの方法を調査して、今回の要件に合致する方法を発見したので、その備忘録としてこちらの記事を書いています。
それでは、ShopifyでGoogleフォントや日本語フォントを導入する方法について解説していきます。
Shopifyでフォントを変更する方法
Shopifyはデフォルトである程度フォント変更を行うことができます。ただし、Googleフォントや日本語フォントには残念ながら対応していません。
Shopifyの管理画面から「オンラインストア＞テーマ＞カスタマイズ」に移動します。その後にテーマー設定をクリックすると、Shopifyのデフォルト機能としてフォントを変更することができます。
ShopifyでGoogleフォントを導入するアプリ
ShopifyでGoogle Fontsを導入する方法を探していたところ、Fonifyというアプリを発見しました。
早速こちらのアプリを導入してみましたが、こちらは海外製のアプリであるため管理画面等があまり分かりやすく無いです。
事前の知識もいくつか必要なので、使用するのが難しいと感じました。
また、Googleフォント以外の日本語フォント（ヒラギノ等）を導入することはできないので、こちらのアプリは見送りました。
さらに調査を進めたところ、日本製のShopifyアプリを発見しました。
らくらく日本語フォント設定｜リテリア Font Pickerというアプリです。
こちらのアプリを使用すると、Googleフォントだけでなく、日本語フォントを簡単にShopifyストアに導入することができました。
価格は4.9ドルになっているので、割りとお手頃価格です。
アプリの管理画面というよりは、ストアのカスタマイズ画面のセクション設定からフォントのカスタマイズを行うことができます。
実際にストアの見た目を確認しながらフォントを変更することができるため、イメージに合致した日本語フォントはGoogleフォントを簡単にShopifyストアに導入することができます。
以下、アプリのリストからいくつかの画像を引用させながら、簡単に機能を説明します。
らくらく日本語フォント設定｜リテリア Font Pickerの簡単な説明
こちらのアプリについてですが、以下の画像が分かりやすいです。
このように、ノーコードで日本語フォントやGoogleフォントを使用することができます。
また、以下のように、ストアのカスタマイズ画面から簡単に日本語フォントやGoogleフォントを導入することができます。
また、以下の画像の場所にWebフォント読み込み用コードを貼り付けることで、簡単にGoogleフォントを使用することができます。
こちらのアプリを使用すれば、Shopifyストアで簡単にNoto Sans JPなどを導入することができます。
また、プロ向けの設定として、アクセントフォント等も設定することができます。
この設定を使用すると、h1,h2,h3などの各々のタグに別々の日本語フォントやGoogleフォントを当てることができます。
また、カスタムWebフォントを実際に使用する場合には、以下のように指定の場所にコードを貼り付ける必要があります。
また、こちらのアプリはアンインストールすれば負債となるコードが残ることはありません。
とりあえずShopifyストアに導入して動作検証を行うことをおすすめしています。
終わりに
ここまでで、ShopifyストアにGoogle Fonts（フォント）や日本語フォントを導入する方法の備忘録は終了です。
以下のURLより、アプリのインストールを行うことができます。
お疲れ様でした。