Launch Express supports Google Fonts and also Local Fonts.

If you want to use it, you can check out the original documentation from Next.js

​
Google Fonts

By default, Launch Express uses the Bricolage_Grotesque font from Google Fonts, but you can easily change this to any other Google Font. Here’s how to use Google Fonts:

layout.tsx
// Default font
import { Bricolage_Grotesque as Font } from "next/font/google";
// Change to the font you want to use
import { Inter as Font } from "next/font/google";
// or
import { Roboto as Font } from "next/font/google";
// or any other Google Font

No other configuration is needed. The font will be automatically added to the head of your page.

​
Local Fonts

If you want to use local fonts, you can import them from next/font/local:

layout.tsx
import { LocalFont } from "next/font/local";

Then, initialize the font with the required configuration:

layout.tsx
import localFont from "next/font/local";

// Font files can be colocated inside of `app`
const myFont = localFont({
	src: [
		{
			path: "../public/fonts/my-font-bold.woff2",
			weight: "400",
			style: "normal",
		},
		{
			path: "../public/fonts/my-font-bold.woff2",
			weight: "700",
			style: "normal",
		},
	],
});

...
<body className={cn('min-h-screen bg-background antialiased', myFont.className)}>
...

If you need an more detailed explanation, you can check out the original documentation from Next.js

Was this page helpful?

WaitlistLogo & Favicon