はじめに

今回の記事では、ShopifyのFont filterを全てまとめてみました。

こちらを参考にしました。

Font filter

フォントフィルタは、フォントオブジェクト上で呼び出されます。

フォントフィルタを用いると、フォント（serif, San-serif, etc.）をロードしたり、フォントのバリアント（Bold, Regular, etc.）を取得したりすることができます。

Shopifyで使用できるフォントとそのバリアントは、Shopify's font libraryに記載されています。

Font filtersを見てみましょう。

font_modify

フォントファミリーの特定のスタイルやフォントウェイト（文字の太さ）にアクセスできます。

font_modifyは、2つの引数を受け取ります。

第一引数はどのプロパティを変更するかを示し、第二引数は変更する内容を示します。
第一引数は、styleとweightの二種類があります。

下の例では、settings.body_fontのフォントを、一回目のfont_modifyの第一引数にweightを指定をすることで、文字のウエイトをboldにしています。

さらに、二回目のfont_modifyの第一引数にstyleを指定することで、文字のスタイルをitalicにしています。

{% assign bold_italic = settings.body_font | font_modify: 'weight', 'bold' | font_modify: 'style', 'italic' %}

以下の表は、第一引数（styleとweightの2種類）と第二引数の実行内容を示しています。

Property	Modification	Behavior
style	normal	同じウェイトの通常のバリアントを返します（存在する場合）。
	italic	同じ重みのイタリック体のバリアントを返します（存在する場合）。
	oblique	italic と同じ動作をします。Shopify が提供するフォントファミリの中には、イタリック体と斜体の両方のスタイルを持つものはありません。
weight	100, 900, etc.	指定したウェイトで同じスタイルのバリアントを返します（存在する場合）。
	normal	400 と同じ動作をします。
	bold	700 と同じ動作をします。
	+100, +900, etc.	同じスタイルの太字フォントを徐々に太くしたものを返します（存在する場合）。たとえば、 font が 400 の重みを持つ場合、 `font｜font_modify "weight", "+100"`は、同じスタイルの 500 の重みを持つバリアントを返します。
	-100, -900, etc.	同じスタイルの増分的に軽いフォントを返します（存在すれば）。たとえば、 font が 400 のウエイトを持つ場合、 `font｜font_modify "weight", "-100"` は、同じスタイルで 300 のウエイトを持つバリアントを返します。
	lighter	CSS font-weight propertyとブラウザのfallback weight（存在する場合）で使用されている規則を適用して、同じスタイルのより軽いバリアントを返します。
	bolder	CSS font-weight propertyとブラウザのfallback weight（存在する場合）で使用されている規則を適用して、同じスタイルの太いバリアントを返します。

font_modifyフィルタは、存在しないフォントバリアントを作成しようとすると、nilを返します。

以下の例では、setting.body_fontのbolderバリアントが存在しないときの出力を示しています。

{% assign bolder_font = settings.body_font | font_modify: 'weight', 'bolder' %}
h2 {
  font-weight: {{ bolder_font.weight }};
}

h2 {
font-weight: ;
}

if や unless などの control flow tag を用いて bolder_font の値をチェックするか、Additional filterであるdefaultを使ってfallback値を代入するとこのようなバグの元をなくす事ができます。

defaultフィルターは、変数にnil、false、""が代入されたときに、設定したデフォルト値を返します。

以下は、if文を用いたときの例です。

{% assign bolder_font = settings.body_font | font_modify: 'weight', 'bolder' %}
{% if bolder_font %}
h2 {
  font-weight: {{ bolder_font.weight }};
}
{% endif %}

font_face

選択したフォントを読み込むためのCSS@font-face宣言を返します。

@font-face CSS at-rule はテキストを表示するためのカスタムフォントを指定します。

このフォントは、リモートサーバーから読み込むことも、ユーザー自身のコンピュータのローカルにインストールされたフォントから読み込むこともできます。

それ以外の場合、url()関数を用いて指定したフォントリソースがダウンロードされると読み込むことが可能になります。

<style>
  {{ settings.heading_font | font_face }}
</style>

<style>
@font-face {
font-family: "Neue Haas Unica";
font-weight: 400;
font-style: normal;
src: url("https://fonts.shopifycdn.com/neue_haas_unica/neuehaasunica_n4.8a2375506d3dfc7b1867f78ca489e62638136be6.woff2?hmac=d5feff0f2e6b37fedb3ec099688181827df4a97f98d2336515503215e8d1ff55&host=c2hvcDEubXlzaG9waWZ5Lmlv") format("woff2"),
url("https://fonts.shopifycdn.com/neue_haas_unica/neuehaasunica_n4.06cdfe33b4db0659278e9b5837a3e8bc0a9d4025.woff?hmac=d5feff0f2e6b37fedb3ec099688181827df4a97f98d2336515503215e8d1ff55&host=c2hvcDEubXlzaG9waWZ5Lmlv") format("woff");
}
</style>

font_faceフィルタは、font_displayを引数をとることで、@font-face宣言のfont-displayに値を追加することもできます。

フォントを描画するまでには、ブロック期、スワップ期、失敗期の３つの期間があり、以下の順に流れます。

プロック期: 目で確認できないフォントを描画され、ダウンロードが完了したら指定したフォントを描画
スワップ期: 代替のフォントが描画され、ダウンロードが完了したら、指定したフォントを描画
失敗期: 指定したフォントは描画されず、代替のフォントが描画

font-displayは、これらの期間の長さをある程度変更できます。

長さを変更するためには、font-displayに値を渡す必要があります。

値は、5つあります。

auto: フォントの表示期間をユーザーエージェントが定義します。
block: フォントに対して短いブロック期の後、永続的にスワップ期を置きます。
swap: フォントに対して非常に短いブロック期の後、短いスワップ期を置きます。
fallback: フォントに対して非常に短いブロック期の後、短いスワップ期を置きます。
optional: フォントに対して非常に短いブロック期の後、スワップ期を置きません。

以下の例では、font_displayのバリューに'swap'を与えています。

<style>
  {{ settings.heading_font | font_face: font_display: 'swap' }}
</style>

<style>
@font-face {
font-family: "Neue Haas Unica";
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("https://fonts.shopifycdn.com/neue_haas_unica/neuehaasunica_n4.8a2375506d3dfc7b1867f78ca489e62638136be6.woff2?hmac=d5feff0f2e6b37fedb3ec099688181827df4a97f98d2336515503215e8d1ff55&host=c2hvcDEubXlzaG9waWZ5Lmlv") format("woff2"),
url("https://fonts.shopifycdn.com/neue_haas_unica/neuehaasunica_n4.06cdfe33b4db0659278e9b5837a3e8bc0a9d4025.woff?hmac=d5feff0f2e6b37fedb3ec099688181827df4a97f98d2336515503215e8d1ff55&host=c2hvcDEubXlzaG9waWZ5Lmlv") format("woff");
}
</style>

font_url

選択したフォントのCDN URLを返します。

{{ settings.heading_font | font_url }}

https://fonts.shopifycdn.com/neue_haas_unica/neuehaasunica_n4.8a2375506d3dfc7b1867f78ca489e62638136be6.woff2?hmac=d5feff0f2e6b37fedb3ec099688181827df4a97f98d2336515503215e8d1ff55&host=c2hvcDEubXlzaG9waWZ5Lmlv

デフォルトでは、font_urlはwoff2のバージョンを返します。
バージョンの変更はパラメータを指定することで可能になります。
woffとwoff2どちらとも対応しています。

WOFFとは、Web Open Font Formatの略で、新しいWebフォント形式のことです。

WEBフォントを利用する際に、この形式のフォントを使用します。

WOFF2は、WOFFと違うバージョンで、WOFFよりも圧縮率が高くほとんどのプラウザで対応しているため、おすすめです。

{{ settings.heading_font | font_url: 'woff' }}

終わりに

今回の記事はここまでになります。

お疲れさまでした。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

【Shopify】LiquidのFont filterを全てまとめてみた話