Add Google Fonts to your Next.js 15 + Tailwind CSS v4 project in seconds — with custom nicknames like font-homie.
No more manual importing, copy-pasting, or setup.
Just one command and fontme wires it all up for you.
fontme handles the boring stuff:
- Imports fonts from
next/font/google - Adds
@themeCSS variables toglobals.css - Updates
app/layout.tsxwith your font + alias - Lets you nickname fonts like
font-body,font-brand, etc.
- One-command Google Fonts setup
- Custom alias support (e.g.
font-primary,font-logo) - Built for Tailwind CSS v4 (no config editing needed)
- Works with Next.js 15 App Router
Use it instantly via npx:
npx fontmeOr install it globally:
bun install -g fontme
# OR
npm install -g fontme- Asks you to give your font a nickname (like
body,display, etc.) - Automatically updates
app/layout.tsxwith the font import and usage - Injects this into your
globals.css:
@theme {
--font-roboto: 'Roboto', sans-serif;
}And applies it to your layout:
const roboto = Roboto({
subsets: ['latin'],
variable: '--font-roboto',
});<body className={`${roboto.variable} font-body`}>npx fontmeWhen prompted:
Give "roboto" a nickname (e.g. "primary"): body
You now have font-body ready to use in your Tailwind project!
Reusing an alias? fontme will warn you and ask for a new one — no accidental overwrites.
MIT © Fahad-Dezloper