Skip to content
Bufferthemes

Typography

This guide will show you how to customize typography and colors in your Bufferthemes theme using Tailwind CSS v4.

Typography Configuration

Using Google Fonts with Tailwind

  1. Install your desired fonts from Fontsource:

    Terminal window
    npm install @fontsource/inter @fontsource/montserrat

  2. Import the fonts in your src/layouts/BaseLayout.astro file:

    import '@fontsource/inter/400.css';
    import '@fontsource/inter/700.css';
    import '@fontsource/montserrat/700.css';

  3. Define your custom font variables in your CSS:

@import "tailwindcss";


@theme {
  --font-primary: 'Inter', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

Using Local Fonts

For self-hosted fonts:

  1. Add your font files to public/fonts/
  2. Define the font face and variables in src/styles/global.css:
@font-face {
  font-family: 'YourFont';
  src: url('/fonts/YourFont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@theme {
  --font-primary: 'YourFont', sans-serif;
}

Need help with customization? Check out our support documentation or contact our team.