shopifyは日本語のフォントに対応しておらず、フォントの変更を行うにはコードを書き換える必要があります。
今回ご紹介する”Fontify”を使用すると、無料で全てのテキストにGoogleフォントを適用する事が可能です。
まずはGoogle fontsで適用させたい日本語のフォントを探しましょう。下記のURLから、日本語で適用可能なフォントの一覧に飛ぶことができます。
https://fonts.google.com/?subset=japanese
画像のような画面が表示されたと思います。目的に沿ったフォントを見つけたら、フォント名を覚えるかコピーしておいて下さい。
それではfontifyのアプリ管理画面に移動しましょう。管理画面がわからない方は、shiopifyホーム画面左側のメニューからアプリ管理⇨fontifyと選択してアプリ管理画面に移動して下さい。
ページを開くとチャラい背景の説明動画が表示されますが、スクロールして上記画像のゾーンまで進んでください。
“UPLOAD FONTS”と”GOOGLE FONTS”のタブがあるので、”GOOGLE FONTS”のタブを選択します。”Select Google Fonts”の下にあるボックスの”Choose”をクリックすると、以下のような画面が開きます。
右上の検索ボックスに、先ほどコピー/記憶したフォント名を打ち込んでください。検索結果に対象のフォントが出てくると思いますので、マウスをフォントに乗せ、右下に表示されている＋のボタンを押すと、先程の画面に戻ります。
Fontify管理画面に戻ったら”Assign Font”のAll(body tags)をチェックし、管理画面をスクロールすると青い”Add font”というボタンがありますので、こちらを押すとフォントがショップに数分後に適用されます。
上記の手順ですと、全ての文書にフォントが適用されるため適用範囲を選んで対応します。
下の画像のように入れる必要があるタグについてのみ、チェックボックスにチェックを入れましょう。強調表示をしたい部分が不明な場合は、choromeなどのデベロッパーツールを使用するとどんなタグを使用しているかが分かります。
チェクを入れた後は、”Add font”を押して作業終了です。
今回は”Fontify”のアプリケーションについて解説しました。元々機能として実装されていますが、Shopifyならではのアプリを使えば、簡単にそして細かな設定の実装も可能です。
ぜひ導入を考えてみてはいかがでしょうか？
・Googleフォントで使用可能なフォントをストアの全てのテキストに適用できる
・h1〜H6とp、li、aのタグを指定して、どこまでを適用範囲にするかを選択できる