Liquid Snippets by ALSEL
📘 公式リファレンス📦 リファレンス/オブジェクト中級

font オブジェクト

テーマ設定の font_picker で選択したフォント情報にアクセスするオブジェクト。フォント名、ウェイト、スタイル、フォールバック指定などの属性を CSS に出力できる。

用途
テーマカスタマイザーでユーザーが選んだフォント設定をスタイルタグまたは CSS ファイルに反映するとき。ロードするフォント・フォールバック・baseline_ratio の調整が必要な場面で使う。
設置場所
theme.liquid の `<style>` タグ内、または assets/*.css.liquid 内で `{{ settings.type_header_font.family }}` のように各プロパティを参照して CSS に埋め込む。
注意点
システムフォント(system? が true)の場合は @font-face 宣言が不要。family 名に英数字以外の文字が含まれる場合は自動的にダブルクォートで囲まれるため、手動でクォート追加しない。baseline_ratio はフォント行高調整用の小数値なので、複雑なタイポグラフィ設定では font_face フィルターと font_modify フィルターも合わせて使う。
タグ:fonttypographysettingscssfont-picker

仕様

133 行 / json
{
  "access": {
    "global": false,
    "parents": [],
    "template": []
  },
  "deprecated": false,
  "deprecation_reason": "",
  "description": "You can use the `font` object in Liquid [assets](/themes/architecture#assets) or inside a [`style` tag](/docs/api/liquid/tags/style)\nto apply font setting values to theme CSS.\n\n&gt; Tip:\n&gt; Use [font filters](/docs/api/liquid/filters/font-filters) to modify properties of the `font` object, load the font,\n&gt; or obtain font variants.",
  "properties": [
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "&gt; Tip:\n&gt; If the family name contains non-alphanumeric characters (A-Z, a-z, 0-9, or '-'), then it will be wrapped in double quotes.",
      "examples": [],
      "return_type": [
        {
          "type": "string",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The family name of the font.",
      "name": "family"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "string",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The fallback families of the font.",
      "name": "fallback_families"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "number",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The baseline ratio of the font as a decimal.",
      "name": "baseline_ratio"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "number",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The weight of the font.",
      "name": "weight"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "string",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "The style of the font.",
      "name": "style"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "",
      "examples": [],
      "return_type": [
        {
          "type": "array",
          "name": "",
          "description": "",
          "array_value": "font"
        }
      ],
      "summary": "The variants in the family of the font.",
      "name": "variants"
    },
    {
      "deprecated": false,
      "deprecation_reason": "",
      "description": "&gt; Tip:\n&gt; You can use this property to determine whether you need to include a corresponding [font-face](/docs/api/liquid/filters/font_face)\n&gt; declaration for the font.",
      "examples": [],
      "return_type": [
        {
          "type": "boolean",
          "name": "",
          "description": "",
          "array_value": ""
        }
      ],
      "summary": "Returns `true` if the font is a system font. Returns `false` if not.",
      "name": "system?"
    }
  ],
  "summary": "A font from a [`font_picker` setting](/themes/architecture/settings/input-settings#font_picker).",
  "name": "font",
  "examples": [],
  "json_data": {
    "path": "/",
    "handle": "settings.type_header_font",
    "data_from_file": ""
  },
  "return_type": []
}

出典・ライセンス

License:
MIT

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

関連項目

📘 公式リファレンス📦 リファレンス/オブジェクト初級

content_for_header オブジェクト

Shopify が必要とするスクリプト(分析・チェックアウト・言語設定など)をすべて動的に出力するオブジェクト。theme.liquid の <head> タグ内に埋め込む必須要素。

📁 theme-liquid-docs·MIT·20
📘 公式リファレンス📦 リファレンス/オブジェクト中級

metaobjects オブジェクト

ストア全体のメタオブジェクト定義にアクセスするグローバルオブジェクト。個別のメタオブジェクトはタイプとハンドルで参照でき、メタオブジェクト定義のエントリをループで反復処理できる。

📁 theme-liquid-docs·MIT·20
📘 公式リファレンス📦 リファレンス/オブジェクト初級

additional_checkout_buttons オブジェクト

PayPal Express Checkout など、オフサイト決済に対応した外部決済プロバイダーがストアに設定されているかを真偽値で返す。`content_for_additional_checkout_buttons` と組み合わせて、該当するチェックアウトボタンを条件付きで表示する。

📁 theme-liquid-docs·MIT·27
📘 公式リファレンス📦 リファレンス/オブジェクト初級

canonical_url オブジェクト

現在のページの正規 URL を取得するオブジェクト。Google などの検索エンジンに対してどのページ版が正規であるかを指定するために使用する。

📁 theme-liquid-docs·MIT·27
📘 公式リファレンス📦 リファレンス/オブジェクト初級

content_for_index オブジェクト

ホームページに表示するセクションの内容を動的に返すオブジェクト。Liquid インデックステンプレートで必ず使用する。

📁 theme-liquid-docs·MIT·27
📘 公式リファレンス📦 リファレンス/オブジェクト初級

content_for_additional_checkout_buttons オブジェクト

PayPal、Apple Pay、Google Pay など複数の決済プロバイダが有効になっているとき、その決済ボタンを HTML として出力するオブジェクト。`additional_checkout_buttons` で有無を判定したうえで、このオブジェクトで実際のボタンを表示する。

📁 theme-liquid-docs·MIT·27