/* The Storey — brand typography system Single source of truth for site-wide fonts. Include this stylesheet anywhere typography is rendered and use the CSS variables below. Font roles --font-display Aristotelica Display ExtraLight — hero headlines, large editorial type --font-text Aristotelica Text ExtraLight — sub-headings, UI titles, captions --font-smallcaps Aristotelica Small Caps Hairline — wordmark tagline, eyebrows --font-body Fibra One Light — long-form body copy, paragraphs The body var is the default applied to . Override per-element with the others. */ @font-face { font-family: 'Aristotelica Display'; src: url('./Aristotelica-Display-ExtraLight.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Aristotelica Text'; src: url('./Aristotelica-Text-ExtraLight.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Aristotelica Small Caps'; src: url('./Aristotelica-Small-Caps-Hairline.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Fibra One'; src: url('./Fibra-One-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } :root { --font-display: 'Aristotelica Display', 'Aristotelica Text', 'Helvetica Neue', Arial, sans-serif; --font-text: 'Aristotelica Text', 'Helvetica Neue', Arial, sans-serif; --font-smallcaps: 'Aristotelica Small Caps', 'Aristotelica Text', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Fibra One', 'Aristotelica Text', 'Helvetica Neue', Arial, sans-serif; } html, body { font-family: var(--font-body); font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .font-display { font-family: var(--font-display); font-weight: 200; letter-spacing: 0.02em; } .font-text { font-family: var(--font-text); font-weight: 200; } .font-smallcaps, .eyebrow, .smallcaps { font-family: var(--font-smallcaps); font-weight: 100; letter-spacing: 0.18em; text-transform: uppercase; } .font-body { font-family: var(--font-body); font-weight: 300; } /* Inputs and buttons inherit the UI font, not the body serif */ button, input, select, textarea { font-family: var(--font-text); }