MENU
フルスタックエンジニアの開発記録
  1. ホーム
  2. Shopify
  3. 【Shopify】Liquidでフォントに関係するフィルターまとめ

【Shopify】Liquidでフォントに関係するフィルターまとめ

Shopify
フォントに関係するフィルター

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: '項目名', '設定値'の形で使います。

スクロールできます
項目名設定値詳細
stylenormal指定された太さで斜体などにしていない標準フォントを設定
styleitalic指定された太さでイタリック体にします
styleoblique指定された太さで斜体にします（italicと類似）
weight100,200,300,400,500,600,700,800,900のいずれか太さを指定
weightnormal太さ400と同等を指定
weightbold太さ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となります
weightlighter親要素の指定より細くします
weightbolder親要素の指定より太くします

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' }}
Shopify
CDN
フォントに関係するフィルター

この記事が気に入ったら
いいね または フォローしてね！

SHARE
  • URLをコピーしました！

関連記事

コメント

コメントする

目次