#はじめに
今回の記事では、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 機能を実現することができます。