Skip to main content

Fonts

Font variables are defined as CSS variables in the base CSS file and then referenced in the tailwind.config.js file, enabling consistent usage throughout the app via Tailwind's utility classes.

This guide provides a breakdown of each font variable, its CSS variable name, and the components or elements it applies to. For more on typography theming, see Typography.

TypeCSS VariableApplies to
Font Heading‑‑font‑heading
  • Drawer headings
  • PDP heading
  • Order Details heading
  • Product Tile title
  • Search Results heading
  • Grid heading
  • Carousel heading
Font Mono‑‑font‑mono
  • Not currently used
Font Body‑‑font‑body
  • All other text
note

Ensure the font you select supports the weights you require for your design.