Help us understand the problem. What is going on with this article?

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

はじめに

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

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

Font filter

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

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

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

Font filtersを見てみましょう。

font_modify

フォントファミリーの特定のスタイルやウエイトにアクセスできます。

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

最初の引数はどのプロパティーを変更するかを示し、二番目の引数は変更する内容を示します。
プロパティーは、styleweightの二種類があります。

下の例では、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' %}

以下の表は、プロパティーと変更できる内容を示しています。

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: ;
}

これを防ぐには、ifunlessなどのcontrol flow tagでbolder_fontの値をチェックするかAdditional filterであるdefaultを使ってfallback値を代入する必要があります。

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

以下は、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に値を追加することもできます。

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

プロック期
目で確認できないフォントを描画され、ダウンロードが完了したら指定したフォントが描画されます

スワップ期
代替のフォントが描画され、ダウンロードが完了したら、指定したフォントが描画されます。

失敗期
指定したフォントは描画されず、代替のフォントが描画されます。

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のバージョンを返します。
バージョンの変更はパラメータを指定することで可能になります。
woffwoff2どちらとも対応しています。

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

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

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

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

終わりに

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

お疲れさまでした。

eijiSaito
株式会社UnReact 取締役 九州大学卒 23歳 Shopify、React、JavaScript、TypeScriptを勉強中。
https://www.unreact.jp/
unreact
北九州市でShopifyを用いたECサイトの制作を行っています。 また、React + Firebaseを用いた自社アプリの開発も行っています。
https://unreact.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away