【Shopifyフォント変更】Google Fontsを導入する方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
サムネイル98

この記事の所要時間:4分

Shopifyはデザインのテンプレートが豊富で、誰でも簡単におしゃれなネットショップを構築することができます。

ですが、テンプレートデザインは英語を前提として制作されているため、日本語フォントがなく、サイト上の日本語部分がバランス悪く感じることがよくあります。

そこで今回は、Shopifyで日本語を含む豊富なフォントデザインを使用できるように、Google Fontsを導入するアプリ「Fontio」についてご紹介します。

Shopifyのデフォルト機能でフォントを変更する

Shopifyのデフォルト機能では日本語フォントはありませんが、英字フォントは複数あり、変更することができます。

まずはShopifyのデフォルト機能のフォント変更について説明します。

Shopifyの管理画面から「オンラインストア > テーマ > カスタマイズ」をクリックします。

テーマのカスタマイズ画面に移動するので、画面左下にある「テーマ設定」をクリックします。

そうすると、画面左側にあるメニューの「文字体裁」で、フォントのデザインとサイズを変更することができます。最後に「保存する」をクリックして完了です。

ちなみにShopifyで利用できるフォントの種類は、以下のページで紹介されています。合わせて参考にしてください。

Available fonts

Google Fontsを導入するShopifyアプリ「Fontio」

Google Fontsとは

Google Fontsとは、Googleが提供するWeb上で使用できるフォントです。基本的には無料で利用することができます。

ですが、Webフォントはサーバーから読み込み表示するため、使用する種類が多いほどサイトの表示速度が遅くなります。

そのため使用するフォントの種類は必要最低限に抑えるように注意してください。

ちなみに同じフォントでも「Regular」や「Bold」などフォントタイプが異なると、別のフォントとして読み込むことになります。

Google Fontsを導入する「Fontio」について

Fontioは、簡単にWebフォントを追加することができるShopifyアプリです。

コーディングやLiquidの知識がなくても、誰でも簡単にGoogle FontsやカスタムフォントをShopifyに追加することができます。

すべてのShopifyテーマに対応しており、プレビュー画面を見ながら設定が可能です。

また、Fontioは無料で利用することができまが、4.99ドル(1回の支払い)でフォントの種類制限を解除し、全フォントを使用することができます。

Fontioの使用方法

使用方法はとてもシンプルです。

まずはコチラからアプリをインストールします。

インストールが完了すると、Fontioの管理画面が表示されるので「Dashboard」のページを開きます。

以下の2つの項目をドロップダウンメニューから選択し、「+ADD」をクリックします。

Select Tag Type:フォントを適用するタグを選択
Select Font Type:Google FontもしくはCustom Font(有料)を選択

そうすると、フォント選択メニューとプレビューが表示されます。

Select Fontで「フォント」を選択し、Select Variantで「フォントタイプ」を選択します。

以下の2つの項目をドロップダウンメニューから選択し、「+ADD」をクリックします。Select Tag Type:フォントを適用するタグを選択
Select Font Type:Google FontもしくはCustom Font(有料)を選択
Select Fontで「フォント」を選択し、Select Variantで「フォントタイプ」を選択します。

「PREVIEW」をクリックすると、フォントのプレビューを確認することができます。

使用するものが決まれば「SAVE」をクリックして完了です。そうするとサイト上で対象の文字が変更されます。

Fontioを使用する前に活用すべきツール

Fontioを使用する際の便利なツールが2つあるので、こちらも活用してみてください。

Google Fontsの公式サイト

Google Fonts

Fontioはフォントを選択する際に、プレビューをクリックするまでフォントデザインを確認できません。

なので、まずはどのようなフォントがあるのかGoogle Fontsのサイトで一覧表で確認することをオススメします。

デベロッパーツール

Fontioは以下のタグで、文字や文章を指定してフォントデザインを変更します。

・Heading (h1~h6)
・Span (span)
・Blockquote (blockquote)
・Div (div)
・Paragraph (p)
・Links (a)
・List (li)
・Body (body)

そのため、フォントデザインを変更したい文字があっても、タグがわからないと指定することができません。

そんな時に役に立つのが「デベロッパーツール」です。

サイトを開き、画面右上にある「Google Chromeの設定」ボタンをクリックし、「その他のツール > デベロッパーツール」をクリックします。

サイトを開き、画面右上にある「Google Chromeの設定」ボタンをクリックし、「その他のツール > デベロッパーツール」をクリックします。

そうすると、サイトのプレビュー画面とコードが表示されるので、ページ内検索で変更したい文字を検索します。

<ページ内の文字を検索する方法>
Windows:Ctrl + F
Mac:command + F

これで変更したい文字がどのタグで囲まれているのか確認することができます。

このように使用するフォントの選択とタグの事前確認を行うことで、スムーズにフォントを変更できます。

【最後に】ブランドイメージにあったフォントを使用しよう

今回はShopifyのフォントを変更する方法をご紹介しました。

フォントデザインはサイトのイメージを大きく変える要素です。

あなたのショップのブランドイメージに合うフォントを使用して、より素敵なネットショップを構築してください。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。