Typography

Font family, Weight, and Size definitions.

Tokens

Token	Type	Default Value
--fs-text-face-body	Font family	-apple-system, system-ui, BlinkMacSystemFont, sans-serif
--fs-text-face-title	Font family	var(--fs-text-face-body)
--fs-text-weight-light	Weight	300
--fs-text-weight-regular	Weight	400
--fs-text-weight-bold	Weight	700
--fs-text-weight-black	Weight	900
--fs-text-size-base	Scale	16px
--fs-text-scale-desktop	Scale	1.25
--fs-text-scale-mobile	Scale	1.13
--fs-text-size-0	Scale	12px
--fs-text-size-1	Scale	14px
--fs-text-size-2	Scale	var(--fs-text-size-base)
--fs-text-size-3	Scale	calc(var(--fs-text-size-2) * var(--fs-scale))
--fs-text-size-4	Scale	calc(var(--fs-text-size-3) * var(--fs-scale))
--fs-text-size-5	Scale	calc(var(--fs-text-size-4) * var(--fs-scale))
--fs-text-size-6	Scale	calc(var(--fs-text-size-5) * var(--fs-scale))
--fs-text-size-7	Scale	calc(var(--fs-text-size-6) * var(--fs-scale))
--fs-text-size-8	Scale	calc(var(--fs-text-size-7) * var(--fs-scale))
--fs-text-size-title-huge	Size	var(--fs-text-size-7)
--fs-text-size-title-page	Size	var(--fs-text-size-6)
--fs-text-size-title-product	Size	var(--fs-text-size-4)
--fs-text-size-title-section	Size	var(--fs-text-size-4)
--fs-text-size-title-subsection	Size	var(--fs-text-size-4)
--fs-text-size-title-mini	Size	var(--fs-text-size-4)
--fs-text-size-lead	Size	var(--fs-text-size-3)
--fs-text-size-menu	Size	var(--fs-text-size-base)
--fs-text-size-body	Size	var(--fs-text-size-base)
--fs-text-size-legend	Size	var(--fs-text-size-1)
--fs-text-size-tiny	Size	var(--fs-text-size-0)
--fs-text-max-lines	N. of lines	2

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.