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

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

[こちら](https://shopify-dev.shopifycloud.com/docs/themes/liquid/reference/filters/font-filters)を参考にしました。
#Font filter
フォントフィルタは、フォントオブジェクト上で呼び出されます。

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

Shopifyで使用できるフォントとそのバリアントは、[Shopify's font library](https://shopify-dev.shopifycloud.com/tutorials/develop-theme-fonts)に記載されています。

Font filtersを見てみましょう。

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

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

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

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

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

```.liquid
{% 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](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#meaning_of_relative_weights)とブラウザの[fallback weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#fallback_weights)（存在する場合）で使用されている規則を適用して、同じスタイルのより軽いバリアントを返します。  |
|   | bolder  | [CSS font-weight property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#meaning_of_relative_weights)とブラウザの[fallback weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#fallback_weights)（存在する場合）で使用されている規則を適用して、同じスタイルの太いバリアントを返します。  |

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

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

```.liquid
{% 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](https://shopify-dev.shopifycloud.com/docs/themes/liquid/reference/filters/additional-filters#default)である`default`を使ってfallback値を代入するとこのようなバグの元をなくす事ができます。

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

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

```.liquid
{% 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()`関数を用いて指定したフォントリソースがダウンロードされると読み込むことが可能になります。

```.liquid
<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`に値を追加することもできます。

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

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

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

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

値は、5つあります。

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


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

```.liquid
<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を返します。`

```.liquid
{{ 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よりも圧縮率が高くほとんどのプラウザで対応しているため、おすすめです。

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

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

お疲れさまでした。

# Shopify アプリのご紹介

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

https://coming-soon.reterior.jp/

https://apps.shopify.com/shopify-application-314?locale=ja&surface_detail=%E3%83%AA%E3%83%86%E3%83%AA%E3%82%A2&surface_inter_position=1&surface_intra_position=1&surface_type=search