Fonts

Vortex doesn't include font files. This guide uses the acme theme from Quick Start and an example font named “Acme Sans”. Replace the names and paths with your own.

Add your font files

Place your font files in public/fonts/ and create src/themes/acme/font.css alongside the generated theme files.

src/themes/acme/font.css

@font-face {
font-family: "Acme Sans";
src: url("/fonts/AcmeSans-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Acme Sans";
src: url("/fonts/AcmeSans-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}

Add a declaration for each weight and style you use. You write font.css yourself. The CLI generates typography.css for theme typography tokens; leave that file generated. Rebuilding the theme preserves your font.css.

Set the theme font families

Add the heading and body font families to your existing theme config:

vortex.config.ts

import type { VortexThemeConfig } from "@vortexlabs/vortex";

const config: VortexThemeConfig = {
themes: {
  acme: {
    globalTokens: {
      fontFamily: {
        heading: { family: '"Acme Sans", sans-serif' },
        body: { family: '"Acme Sans", sans-serif' },
      },
    },
  },
},
};

export default config;

bun run build:theme

Import the styles

Import the font stylesheet and generated theme once in your app's root entry:

src/main.tsx

import "./themes/acme/font.css";
import "./themes/acme/globals.css";

For Next.js with a root-level app/ directory, import them in the root layout:

app/layout.tsx

import "../src/themes/acme/font.css";
import "../src/themes/acme/globals.css";

For src/app/layout.tsx, use ../themes/acme/font.css and ../themes/acme/globals.css. See Create a Theme for more customization.