Font Usage

Define CSS Variables: Start by defining font variables (e.g., for headings, body, and monospace text) in the base CSS file to ensure typographic consistency across components.

@layer base {
  :root {
    --font-heading: 'Helvetica, Arial, sans-serif';
    --font-body: 'Roboto, sans-serif';
    --font-mono: 'Courier New, monospace';
  }
}

Reference in Tailwind Config: Extend Tailwind's font utilities by adding mappings for these CSS variables in tailwind.config.js under theme.extend.fontFamily.

theme: {
  extend: {
    fontFamily: {
      heading: ['var(--font-heading)'],
        body: ['var(--font-body)'],
        mono: ['var(--font-mono)'],
      },
    },
}

note

Ensure the font you select supports the weights you require for your design.

Configure for CMS Use: Content creators have the ability to select from the CMS any app font or any google font.

App Usage: Apply these font variables to components using Tailwind classes.

<div className='font-heading'>This text uses the custom heading font.</div>

With this setup, font variables can be referenced throughout the project via Tailwind classes like font-heading and font-body. Changes to font variables in the CSS will propagate across the project, maintaining a consistent and scalable typography style.