SvelteKit (adapter‑static) + Tailwind v4 - How do I add a Google font?

(and make it the default sans stack without breaking the zero‑config build?)

I created a new project with the sv create wizard and chose Tailwind CSS.

The scaffold does not generate a tailwind.config.js or postcss.config.cjs. src/app.css looks like this (and everything renders correctly in the UI):

@import 'tailwindcss';
@plugin '@tailwindcss/typography';

Goal

Load Montserrat from Google Fonts and make it the default sans‑serif font (font-sans) for the whole site.

What I tried

1. Added the Google Font link tag in src/routes/+layout.svelte.
2. Created a tailwind.config.ts (and .js) to extend fontFamily:

import type { Config } from 'tailwindcss';
import defaultTheme from 'tailwindcss/defaultTheme';

export default {
  content: ['./src/**/*.{svelte,html,js,ts}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['"Montserrat"', ...defaultTheme.fontFamily.sans]
      }
    }
  },
  plugins: []
} satisfies Config;

3. Replaced @import 'tailwindcss'; with the three layer directives (this is what breaks tailwind styles):

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Added postcss.config.cjs with:

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {}
  }
};

After this, pnpm dev starts without errors, but Tailwind stops scanning my .svelte files—only the preflight styles remain and all utilities disappear.

Undo all your steps back to when it was working well, ala:

@import 'tailwindcss';
@plugin '@tailwindcss/typography';

The steps you followed are for v3 but you seem to be using v4, so we should configure Tailwind's theme variables in the v4 style.

After reverting everthing back, add the following to src/app.css:

@theme {
  --font-sans: 'Montserrat', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

So that your CSS file should look like:

@import 'tailwindcss';
@plugin '@tailwindcss/typography';

@theme {
  --font-sans: 'Montserrat', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

See the documentation for details on customizing font families in v4.