Googleフォント設定方法

(本記事は、2020年10月にnoteに書いた原稿を本人が移設したものです。）

Shopify、カスタマイズしてますか？
今日は、カスタマイズの重要要素のひとつ「フォント設定」について、特にGoogleフォントの設定方法について、まとめておきたいと思います。

Shopifyでは、テーマカスタマイズの「テーマ設定」から、フォントを選択します。選べるフォントは選択するテーマにもよるようですが、かなりたくさんあります。ただ、一覧して選べるわけではないのと、日本語対応フォントがどれだかわからないのとで、フォント素人の私からすると、うーん・・・・、選びにくい、というか、選べない。

そんなとき、使えるといいのがGoogleフォント。というわけで、Googleフォントの設定方法を、英語・日本語双方で検索してみました。が、いまいち自分がうまくできる方法がなかなか見つからず、ようやく見つけた方法がこちら。

無料アプリ「Fontify」をインストール！
https://apps.shopify.com/fontify-change-customize-font-for-your-store

「Fontify」をインストールして開くと、ちょっと浮かれた感じのロゴのページが開くですが、スクロールダウンしていくと「Upload Fonts」「Google Fonts」のタブが出てきます。「Upload Fonts」は有料ですが、Googleフォントは今のところ無料で設定可能！

「Google Fonts」のタブを選び、右側に「Choose」表示のついた欄をクリックすると、Googleフォントを検索する画面が出てきます。そこで「Noto Sans JP」など、希望のフォントを検索したら、フォントのstyle&weightをプルダウンから選択し「＋」マークをクリック。元も画面に戻ります。

それから、このフォントを設定したい要素（H1～H6、ｐ、liリストなど）をチェックし、「Add Font」ボタンをクリックすると完了！最大30秒ほどで、Shopify Storeに反映されます。

1点だけ気を付けたほうがいいのは、フォントを設定したい要素選択の際、一度「ALL」を選ぶと、選択チェックボックスの下にある「Custome Elements」の部分に、タグが表示されます。サイト全体に、そのフォントを設定したい場合はそのままで良いのですが、やっぱり「ALL」のチェックを外して、特定の要素だけに変更したい場合は、「Custome Elements」の欄に書かれているタグを消すようにしてください。そうしないと、全体に適用されてしまいます。

以上、Shopify無料アプリを活用した、Googleフォントの簡単設定方法でした。