The_Typography_Stack :: Inheritance_Override

A UI without a distinct typeface has no identity. However, a UI without a fallback stack has no stability.

Identity requires Outfit. Stability requires the system stack. We must inject the custom font while retaining the native fallback to prevent FOUT and guarantee layout integrity if the network fails.

We achieve this by importing the Default Theme and using the spread syntax (...) to merge our custom font with the existing library.

Reference Protocol: Review the official Tailwind Default Font Stack to understand what you are inheriting.

The implementation

1. Import: We pull the defaultTheme from the Tailwind core.
2. Extend: We target fontFamily.sans.
3. Merge: We place "Outfit" at index 0, followed by ...defaultTheme.fontFamily.sans.

// tailwind.config.mjs

/** @type {import('tailwindcss').Config} */
import defaultTheme from "tailwindcss/defaultTheme";

export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ["Outfit", ...defaultTheme.fontFamily.sans],
      },
    },
  },
};

This instructs the browser: “Try to render Outfit. If latency is too high or the file is missing, immediately revert to the best available system font defined by Tailwind.”

System verdict :: defensive design

Never manually type a fallback list (e.g., sans-serif, Arial). Tailwind has already optimized the perfect stack for Windows, macOS, iOS, and Android.

Extend their engineering. Do not overwrite it.