Liquid Snippets by ALSEL
📘 公式リファレンス🔧 リファレンス/フィルター中級

font_face フィルター(フォント読み込み用の@font-face宣言を生成)

フォントオブジェクトから CSS の @font-face 宣言を生成し、ストア上でカスタムフォントを読み込む。font_display プロパティでフォント読み込み中の表示動作をカスタマイズ可能。

用途
テーマ設定で選んだカスタムフォントを <style> タグ内に CSS @font-face として埋め込み、サイト全体で利用するとき。
設置場所
theme.liquid または主要セクションの <style> タグ内で `{{ settings.type_header_font | font_face }}` の形で使い、生成された @font-face 宣言を CSS に注入する。
注意点
フォントオブジェクトは Shopify 管理画面のテーマ設定で「フォント」型のメタフィールドから取得したものが前提。font_display パラメータに指定できる値は 'auto'、'block'、'swap'、'fallback'、'optional' で、デフォルトは 'swap'(フォント読み込み中は代替フォント、読み込み完了後に置き換え)となる。フォント読み込みが遅いときは 'fallback' や 'optional' で、ユーザーエクスペリエンスを調整する。
タグ:fontcssfont-facetypographytheme-setting

仕様

48 行 / json
{
  "category": "font",
  "deprecated": false,
  "deprecation_reason": "",
  "description": "",
  "parameters": [
    {
      "description": "[string] Customize the [`font_display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) of the `@font-face` declaration.",
      "name": "font_display",
      "positional": false,
      "required": false,
      "types": []
    }
  ],
  "return_type": [
    {
      "type": "string",
      "name": "",
      "description": "",
      "array_value": ""
    }
  ],
  "examples": [
    {
      "name": "",
      "description": "",
      "syntax": "",
      "path": "/",
      "raw_liquid": "{{ settings.type_header_font | font_face }}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": false
    },
    {
      "name": "font_display",
      "description": "You can include an optional parameter to specify the [`font_display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) of the `@font_face` declaration.\n",
      "syntax": "font | font_face: font_display: string",
      "path": "/",
      "raw_liquid": "{{ settings.type_header_font | font_face: font_display: 'swap' }}",
      "parameter": true,
      "display_type": "text",
      "show_data_tab": false
    }
  ],
  "summary": "Generates a CSS [`@font_face` declaration](https://developer.mozilla.org/en-US/docs/Web/CSS/%40font-face) to load the provided font.",
  "syntax": "font | font_face",
  "name": "font_face"
}

出典・ライセンス

License:
MIT

このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

関連項目

📘 公式リファレンス🔧 リファレンス/フィルター初級

avatar フィルター(顧客アバター画像HTML生成)

顧客アバターが存在する場合、それを表示する HTML タグを生成するフィルター。customer オブジェクトに対して使用する。

📁 theme-liquid-docs·MIT·19
📘 公式リファレンス🔧 リファレンス/フィルター初級

default_errors フィルター(フォーム送信エラーを日本語化)

form.errors の各エラーコードに対応する既定のエラーメッセージを自動生成するフィルター。フォーム送信時の入力値不正や必須項目空白などのエラーを言語別に出力する。

📁 theme-liquid-docs·MIT·19
📘 公式リファレンス🔧 リファレンス/フィルター初級

date フィルター(日付を指定形式でフォーマット)

日付値を指定されたフォーマット文字列に従って整形する。フォーマット文字列が空の場合は元の値がそのまま返される。入力が日付に変換できない場合も元の値が返される。

📁 theme-liquid-docs·MIT·19
📘 公式リファレンス🔧 リファレンス/フィルター初級

payment_terms フィルター(Shop Pay分割払いバナーを生成)

product フォームまたは cart フォームに対して使用し、Shop Pay の分割払いオプションを表示するための HTML を生成するフィルター。顧客が購入時に分割払いプランを選択できるようにする。

📁 theme-liquid-docs·MIT·19
📘 公式リファレンス🔧 リファレンス/フィルター初級

abs フィルター(数値の絶対値を取得)

負の数を正の数に変換する。数値の絶対値(ゼロからの距離)を返すフィルター。

📁 theme-liquid-docs·MIT·30
📘 公式リファレンス🔧 リファレンス/フィルター初級

append フィルター(文字列の末尾に追加)

文字列の末尾に別の文字列を連結するフィルター。URL パスの結合やテキストの接尾辞追加に使う。

📁 theme-liquid-docs·MIT·30