Fonts

LaunchFast uses the default Tailwind CSS font. You can replace it with a custom font by following these steps.

Using custom fonts

Step 1: Add font files and CSS

Place your font files in public/fonts/. Add the font CSS file to app/styles/. If your font does not come with a CSS file, generate one using a tool like Transfonter. Ensure the url in the CSS is relative to the public folder:

url('/fonts/yourfont/yourfont-200.woff2')

Step 2: Update CSS variables

/* tailwind.css */
@layer base {
  :root {
    --font-sans: YourFont;
  }
}

Step 3: Update Tailwind config

import defaultTheme from 'tailwindcss/defaultTheme.js'

// tailwind.config.ts
extend: {
  fontFamily: {
    sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
  }
}

Step 4: Import the stylesheet

// app/routes/root.tsx
import fontStyleSheetUrl from './styles/yourfont.css?url'

// Add to the links array:
{ rel: 'preload', href: fontStyleSheetUrl, as: 'style' },
{ rel: 'stylesheet', href: fontStyleSheetUrl },

Also expose and cache the fonts folder in server/index.ts:

app.use(
  '/fonts',
  express.static('public/fonts', { immutable: true, maxAge: '1y' }),
)

Font metric overrides (CLS prevention)

Custom fonts can cause Cumulative Layout Shift because the browser does not know the font dimensions until it arrives. Font metric overrides fix this by defining fallback font metrics that match your custom font.

Generate overrides

Use the fontpie utility to generate overrides for each font weight:

npx fontpie ./public/fonts/yourfont/yourfont-200.woff2 -w 200 -s normal -n YourFont

This outputs a @font-face block with ascent-override, descent-override, line-gap-override, and size-adjust values. Add these to your font stylesheet.

For multiple font files, use fontpie-from-css to generate all overrides at once:

npx fontpie-from-css ./public/fonts/yourfont/yourfont.css

Ensure each original @font-face declaration includes font-display: swap or the fallback will not work. Then add the fallback font name to your CSS variables:

/* tailwind.css */
@layer base {
  :root {
    --font-sans: YourFont, YourFontFallback;
  }
}