Shopifyのフォントを変更する方法とGoogle Fontsを導入する方法を解説

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

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

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

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

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

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

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

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

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

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

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

Available fonts

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

Google Fontsとは

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

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

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

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

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

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

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

すべてのShopifyテーマに対応しており、数クリックで簡単に設定できます。

基本的にはタグを指定してサイト内の指定したタグのフォントを一括で変更しますが、特定箇所のみ指定してフォントを変更することもできます。

また、Fontifyは無料でGoogle Fontsを追加することができます。

カスタムフォントを利用する場合は、15書体まで無料。16書体目からは10書体あたり5ドルかかります。

Fontifyの使用方法

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

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

インストールが完了すると、Fontifyの管理画面が表示されるので下にスクロールします。

編集欄の上部にあるメニュータブで「GOOGLE FONTS」を選択します。

Select Google fontsでフォントタイプを選択し、Select elements to assignでフォントを変更するタグを選択します。

画面を下にスクロールし、Statusの欄がアクティブになっていることを確認します。

最後に「Add font」をクリックして完了です。

その他にも編集画面にはフォントの追加時に様々なカスタム項目があります。

Google Fontsを使いするだけではなく、細かくフォント編集したい場合は、以下を参考に編集してください。

Custom Elements：ページ内の特定箇所の文字のみ変更する場合に使用
Custom Stylesheet：指定したフォントのCSSを編集
☑︎Overwrite other fonts：設定した内容が最優先されます（推奨）
☑︎Apply for desktop only：デスクトップで設定が反映されます
☑︎Apply for mobile only：モバイルで設定が反映されます
Apply for languages：変更する言語を選択します（All languages 推奨）

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

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

Google Fontsの公式サイト

Google Fonts

Fontifyはフォントを選択する際にフォントデザインを確認することができますが、Google Fontsのサイトではよりイメージしやいフォントデザインを閲覧できます。

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

デベロッパーツール

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

・All (body)
・Heading (h1~h6)
・Paragraph (p)
・Blockquote (blockquote)
・List (li)
・Hyperlink (a)

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

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

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

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

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

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

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

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

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

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

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