Skip to main content

Typography

Font family, Weight, and Size definitions.

Tokens

TokenTypeDefault Value
--fs-text-face-bodyFont family-apple-system, system-ui, BlinkMacSystemFont, sans-serif
--fs-text-face-titleFont familyvar(--fs-text-face-body)
--fs-text-weight-lightWeight300
--fs-text-weight-regularWeight400
--fs-text-weight-boldWeight700
--fs-text-weight-blackWeight900
--fs-text-size-baseScale16px
--fs-text-scale-desktopScale1.25
--fs-text-scale-mobileScale1.13
--fs-text-size-0Scale12px
--fs-text-size-1Scale14px
--fs-text-size-2Scalevar(--fs-text-size-base)
--fs-text-size-3Scalecalc(var(--fs-text-size-2) * var(--fs-scale))
--fs-text-size-4Scalecalc(var(--fs-text-size-3) * var(--fs-scale))
--fs-text-size-5Scalecalc(var(--fs-text-size-4) * var(--fs-scale))
--fs-text-size-6Scalecalc(var(--fs-text-size-5) * var(--fs-scale))
--fs-text-size-7Scalecalc(var(--fs-text-size-6) * var(--fs-scale))
--fs-text-size-8Scalecalc(var(--fs-text-size-7) * var(--fs-scale))
--fs-text-size-title-hugeSizevar(--fs-text-size-7)
--fs-text-size-title-pageSizevar(--fs-text-size-6)
--fs-text-size-title-productSizevar(--fs-text-size-4)
--fs-text-size-title-sectionSizevar(--fs-text-size-4)
--fs-text-size-title-subsectionSizevar(--fs-text-size-4)
--fs-text-size-title-miniSizevar(--fs-text-size-4)
--fs-text-size-leadSizevar(--fs-text-size-3)
--fs-text-size-menuSizevar(--fs-text-size-base)
--fs-text-size-bodySizevar(--fs-text-size-base)
--fs-text-size-legendSizevar(--fs-text-size-1)
--fs-text-size-tinySizevar(--fs-text-size-0)
--fs-text-max-linesN. of lines2

Using a custom font

To use a different font family in your storefront, take the following steps:

  1. Open the src/fonts/WebFonts.ts file and add the <link> tag for your font family of choice. For example:

    src/font/WebFonts.ts
    function WebFonts() {
    return (
    <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700&display=swap"
    />
    )
    }
    tip

    We recommend using Google Fonts since they are free, reliable, and fast to load.

  2. Save your changes.

  3. Open your theme's stylesheet (e.g., src/styles/themes/midnight.scss) and replace the value of the --fs-text-face-body token with the name of the font you configured in the previous step. For example:

    --fs-text-face-body: 'Raleway', sans-serif;
  4. Save your changes.

Didn't find your answers? Ask the Community. For documentation suggestions, submit your feedback.

JOIN THE COMMUNITY

ON THIS PAGE