Fonts

Defining fonts is as easy as defining colors or spacings, just use fonts property in config:

export const shopstoryConfig = {
  //...
  fonts: [
    {
      id: 'body',
      label: 'Body',
      value: {
        fontSize: 20,
        lineHeight: 1.8,
        fontFamily: 'sans-serif'
      },
      mapTo: "$body"
    },
    {
      id: 'body-small',
      label: 'Body small',
      value: {
        fontSize: 13,
        lineHeight: 1.8,
        fontFamily: 'sans-serif'
      },
      mapTo: "$body2"
    },
    {
      id: 'heading1',
      label: 'Heading 1',
      value: {
        fontFamily: 'serif',
        fontSize: 48,
        lineHeight: 1.2,
        fontWeight: 700,
        '@sm': {
          fontSize: 36 // override font size from sm and xs
        }
      },
      mapTo: "$heading1"
    },
    {
      id: 'heading2',
      label: 'Heading 2',
      value: {
        fontFamily: 'serif',
        fontSize: 36,
        lineHeight: 1.2,
        fontWeight: 700,
        '@sm': {
          fontSize: 24 // override font size from sm and xs
        }
      },
      mapTo: "$heading2"
    },
    
  ],
}

As you can see fonts are just objects with CSS properties. You can make font sizes or line heights responsive with @{breakpoint} notation.

Master tokens

Below we're showing master tokens for fonts:

Token	Description
$body	Main body text font
$body.bold	Bold main body.
$body2	Smaller body text font.
$body2.bold	Bold small body.
$heading1	Heading 1 (biggest)
$heading2	Heading 2
$heading3	Heading 3
$heading4	Heading 4 (smallest)

If you only have 1 body text or 2 headings then remember that you can map one of your custom tokens to multiple Shopstory master tokens. For example, if you have only 1 body style without bold you can map it to all of the Shopstory body font tokens.