ShopifyにWebフォントを簡単に読み込む方法

ShopifyでつくったサイトにWebフォントを読み込んで、そのフォントを使いたいときがあります。

Googleフォントだと日本語フォントに限って言えば、約8種類しか選べないので、もう少し多くのバリエーションからフォントをこだわって選びたい。

そんなときはAdobe Fonts(旧名 typekit)を使って、Shopifyのサイトにこだわりのフォントを読み込んでみましょう。

Adobe FontsはAdobeのCreative Cloudのプランをサブスクリプション（購読）していれば、追加料金なしで使うことができます。
使用フォント数に制限が無く、約15,000を超えるフォントからいくつでも使用できます。

すべてのフォントが個人だけでなく商用でも利用可能です。

以前は「Adobe Typekit」という名前で、料金やライセンス、数の制限などが複雑でしたが、それがすべて撤廃されて新しく「Adobe Fonts」に生まれ変わりました。

Adobe FontsのWebサイトへのフォントの追加は↓の公式サイトをご参照ください。
https://helpx.adobe.com/jp/fonts/user-guide.html/jp/fonts/using/add-fonts-website.ug.html

それでは上のAdobe Fontsの公式サイトを参照いただきながら、ご自分のwebプロジェクトに使いたいフォントを選択することができたかと思います。

そうしたら①「webプロジェクト」のタブを選択します。そうすると自分が選択したフォントファミリーが登録されているのが分かると思います。
これらのフォントを使いたい場合、②に表示されているJavaScriptコードをコピーしてShopifyテーマの「Layout」フォルダのtheme.liquidの</html>タグ直下にペーストします。

これでShopifyのテーマにAdobe Fontsで選択したwebプロジェクトのフォントをJavaScriptで読み込むことができました。
そうしたら、次にその読み込んだフォント（font-family）をスタイルシートに反映していきましょう。（テーマはShopifyの公式デフォルトテーマのDebutであることを前提に説明していきます。）

まず、「Assets」フォルダにある①「theme.scss.liquid」をクリックします。次に「theme.scss.liquid」ファイル内を検索したいので、 [Ctrl] キーを押しながら、同時に「F」キーを押します。
そうすると検索窓が表示されるので、そこに「typography」と入力します。

/*================ Typography ================*/
{% assign header_font = settings.type_header_font %}
{% assign base_font = settings.type_base_font %}
{{ header_font | font_face }}
{{ base_font | font_face }}
{%- assign base_font_bolder = base_font | font_modify: 'weight', 'bolder' -%}
{%- assign base_font_bold = base_font | font_modify: 'weight', 'bold' -%}
{%- assign base_font_italic = base_font | font_modify: 'style', 'italic' -%}
{%- assign base_font_bold_italic = base_font_bold | font_modify: 'style', 'italic' -%}
{{ base_font_bold | font_face }}
{{ base_font_bolder | font_face }}
{{ base_font_italic | font_face }}
{{ base_font_bold_italic | font_face }}
$font-weight-body--bold: {{ base_font_bold.weight | default: 700 }};
$font-weight-body--bolder: {{ base_font_bolder.weight | default: 700 }};
$font-stack-header: {{ header_font.family }}, {{ header_font.fallback_families }};
$font-style-header: {{ header_font.style }};
$font-weight-header: {{ header_font.weight }};
$font-stack-body:  ten-mincho-text, serif;
$font-style-body: {{ base_font.style }};
$font-weight-body: {{ base_font.weight }};
$font-size-header: {{ settings.type_header_base_size }} * 1px;
$font-size-base: {{ settings.type_base_size }}px; // Henceforth known as 1em
$font-stack-cart-notification: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-size-mobile-input: 16px; // min 16px to prevent zooming

上の/*================ Typography ================*/のコメント以降が「タイポグラフィ」の設定をしているスタイルシート（scss, liquidコード含む）です。
コードの中にはscssの「変数$」などが登場しますが、scssの「変数$」に関してもし分からない場合は、「scss 変数」などで調べてみてください。

コードを読んでいくと、③$font-stack-bodyというscssの変数がこのスタイルシートの中でbodyのfont-familyを指定しているのに使われているのが分かります。

④$font-stack-bodyでページ内検索してみると、確かにbodyタグのプロパティであるfont-familyに$font-stack-bodyがscssの変数として指定されているのが分かります。

ten-mincho-text, serifという先のAdobe Fontsのwebプロジェクトで設定したフォントを③$font-stack-bodyの変数の値として入れてみます。

そうすると、bodyタグのfont-familyがten-mincho-text, serifに指定されました。開発者ツールでみるとよく分かります。

この一連の流れがShopifyにwebフォント（今回の場合はAdobe Fonts）を読み込む簡単な方法でした。

ただこれだけだとひとつ問題があって、Flash Of Unstyled Text (FOUT)と呼ばれている描画にともなうチラツキの現象が起こってしまうことです。

Google FontsやAdobe TypekitのWebフォントを利用すると、ブラウザはWebフォントのダウンロードが完了するまでは代替フォントでテキストを描画します。

その後Webフォントのダウンロードが終わったあとにWebフォントを用いたテキストの再描画をして表示の切り替えを行います。

言葉で説明するよりも実際に見たほうが、どういう事が直ぐに理解出来ると思うので↓の動画を見てみましょう。

これがFlash Of Unstyled Text (FOUT)と呼ばれている描画にともなうチラツキの現象です。

次の記事ではこのチラツキ現象を解決する方法について説明します。

ShopifyのWebフォントによるチラツキをなくす方法

Nirvana Lab.ではShopifyでのECサイトの制作・構築、Shopifyのテーマカスタマイズ、他社ECプラットフォームからのShopifへの移行だけでなく
翻訳・ローカライゼーションもに対応しておりますので、まずは何でもお気軽にご相談くださいませ。

https://nirvana-lab.com/portfolio/