Shopifyサイトにて設定されているフォント情報をまとめて扱うfont
オブジェクトに関わるフィルターです。
主にCSSファイル内での利用を想定されており、フォントを読み込んだり、フォント関連の設定を呼び出すことができます。
CSSファイル内にLiquidを記述したいときは、ファイルの拡張子を.css.liquid
としてください。
font_modify
フォントに関わる設定を書き換えるのがfont_modify
。
例えば、管理画面上でユーザーが指定したフォント設定をsettings.body_font
として保持しているとします。font-family
、font-weight
、font-size
などが含まれている状態です。
そのデフォルト設定から太字にしたものを「見出し用フォント設定」として扱いたい場合は、以下のように設定が可能です。
{% assign default_bold = settings.body_font | font_modify: 'weight', 'bold' %}
assign
で変数「default_bold
」を定義しています。
変数default_bold
は、デフォルトのフォント設定settings.body_font
を引き継ぎつつ、ただしfont-weight
だけbold
に変更したデータとなります。
その上で、CSSファイル内で下記のように使います。
h2 {
font-weight: {{ default_bold.weight }};
}
その結果、CSSファイル上では以下のように出力されます。
/* 出力結果 */
h2 {
font-weight: bold;
}
管理画面上でユーザーが指定したフォント設定をベースに利用しつつ、特定の場所を太字などにして使うのに便利ですね。
font_modifyで使えるオプションまとめ
先程は例としてfont-weight
をbold
にするケースを紹介しましたが、他にもいろいろな設定が利用できます。
font_modify: '項目名', '設定値'
の形で使います。
項目名 | 設定値 | 詳細 |
---|---|---|
style | normal | 指定された太さで斜体などにしていない標準フォントを設定 |
style | italic | 指定された太さでイタリック体にします |
style | oblique | 指定された太さで斜体にします(italic と類似) |
weight | 100 ,200 ,300 ,400 ,500 ,600 ,700 ,800 ,900 のいずれか | 太さを指定 |
weight | normal | 太さ400 と同等を指定 |
weight | bold | 太さ700 と同等を指定 |
weight | +100 ,+200 ,+300 ,+400 ,+500 ,+600 ,+700 ,+800 ,+900 のいずれか | 元の指定値に加算します たとえば、元が 400 のときに+100 を指定した場合、font-weight は500 となります |
weight | -100 ,-200 ,-300 ,-400 ,-500 ,-600 ,-700 ,-800 ,-900 のいずれか | 元の指定値から減算します たとえば、元が 400 のときに-100 を指定した場合、font-weight は300 となります |
weight | lighter | 親要素の指定より細くします |
weight | bolder | 親要素の指定より太くします |
font_modify利用時の注意
font_modify
で設定値を変更しようとした場合、もともと設定されていないフォント設定は上書きできずnil
が挿入されてしまうので注意。
たとえばsettings.body_font
が指定されていなかった場合にはfont_modify
を使ってもうまく動作しません。
{% assign default_bold = settings.body_font | font_modify: 'weight', 'bolder' %}
h2 {
font-weight: {{ default_bold.weight }};
}
/* 出力結果 */
h2 {
font-family: ;
}
このバグを防ぐためには、if
文で条件分岐させておくとよいでしょう。
{% assign default_bold = settings.body_font | font_modify: 'weight', 'bolder' %}
{% if default_bold %}
h2 {
font-weight: {{ default_bold.weight }};
}
{% endif %}
font_face
指定したフォントを、CSSの@font-face
宣言で扱うためのコードを生成してくれます。
{{ settings.heading_font | font_face }}
CSSファイル内、もしくは<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");
}
なお、CSSのfont-display
プロパティを同時に指定することも可能です。
{{ settings.heading_font | font_face: font_display: 'swap' }}
/* 出力結果 */
@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");
}
font-display
プロパティ:
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
font_url
指定したフォントファイルのCDN URLを取得することができます。
{{ settings.heading_font | font_url }}
管理画面上で指定されたフォントをsettings.heading_font
で参照し、そのファイルのURLを取得して出力するコードです。
<!-- 出力結果 -->
https://fonts.shopifycdn.com/neue_haas_unica/neuehaasunica_n4.8a2375506d3dfc7b1867f78ca489e62638136be6.woff2?hmac=d5feff0f2e6b37fedb3ec099688181827df4a97f98d2336515503215e8d1ff55&host=c2hvcDEubXlzaG9waWZ5Lmlv
font_url
はデフォルトでwoff2
形式のファイルを扱います。
もしwoff
形式のファイルを参照したい場合は、下記のように指定することも可能です。
{{ settings.heading_font | font_url: 'woff' }}
コメント