@font

Applies a font-family from your config, with optional font size.

Syntax

@font {familyKey} [fontSizeKey];

Basic Usage

/* Config: families.main = ['Inter', 'sans-serif'] */
body {
  @font main;
}

/* Output */
body {
  font-family: Inter, sans-serif;
}

Hierarchical Keys

Use slash or dot notation for nested family definitions:

/* Config: families.header.display = ['Playfair Display', 'serif'] */
h1 {
  @font header/display;
  @font header.display;  /* equivalent */
}

/* Config: families.body.regular = ['Inter', 'sans-serif'] */
p {
  @font body/regular;
  @font body.regular;  /* equivalent */
}

With Font Size

Combine font family and size in one rule:

/* Applies family AND responsive font-size */
h1 {
  @font header/display xl;
}

This is equivalent to:

h1 {
  @font header/display;
  @fontsize xl;
}

Config Formats

Font families can be defined in multiple ways:

families: {
  // Array (recommended)
  main: ['Inter', 'Helvetica', 'sans-serif'],

  // Slash notation
  'body/regular': ['Inter', 'sans-serif'],
  'body/bold': ['Inter-Bold', 'sans-serif'],
  'header/display': ['Playfair Display', 'serif'],

  // Nested objects (equivalent to slash notation)
  body: {
    regular: ['Inter', 'sans-serif'],
    bold: ['Inter-Bold', 'sans-serif']
  },
  header: {
    display: ['Playfair Display', 'serif']
  }
}