GuidesHow to

Add fonts

Add fonts to your Makeswift & Next.js project.

You can use any web font with Makeswift not just Google Fonts. Fonts can come from your brand’s type license, a foundry, or any other source, as long as you can serve them as standard web font files (e.g., .woff2, .woff, .ttf). Makeswift exposes those fonts in the builder once you register them in the API handler.

Adding fonts to Makeswift involves two steps:

  1. Adding the font files to your Next.js app
  2. Registering the fonts with Makeswift in the API handler

We recommend using variable fonts as they reduce the number of font files requested.

Variable fonts

Variable fonts combine multiple styles (weights, widths, italics) into a single font file, whereas traditional fonts require separate files for each style (for example, Regular, Medium, Bold).

Benefits of variable fonts

  • Performance Instead of downloading multiple files (400, 500, 700, etc.), the browser downloads one file that covers the full range. This reduces HTTP requests and often leads to a smaller overall payload.

  • Design flexibility With variable fonts you can set values like font-weight: 432; or smoothly animate between weights, instead of being limited to predefined steps like 400 and 700. This gives you more granular control over typography.

  • Future-proofing Modern browsers have excellent support for variable fonts, and they are becoming the standard way type foundries distribute fonts.

When static fonts still make sense

If you only ever use a single weight (for example, just Regular), a static .woff2 file might be slightly smaller to load. But for most projects that use multiple weights or styles, variable fonts are more efficient and flexible.

next/font

When adding fonts to your Next.js app we recommend using the next/font module. This keeps font files in your app (no external requests), optimizes loading, and helps reduce layout shifts.

Depending on the source of your fonts, you have two options:

  • next/font/google for Google Fonts
  • next/font/local for custom or licensed fonts (non-Google)

Why next/font helps (but is optional):

  • Built-in self hosting of any font file including your custom or licensed (non-Google) fonts.
  • Optimized loading to reduce layout shift (CLS) and improve privacy (no external font CDNs at runtime).

These benefits come from the next/font module’s automatic handling of @font-face generation, preloading, and fallbacks.

See Next.js next/font reference docs for more options like fallbacks, subsets, and variable fonts.

You do not have to use next/font. If you prefer, you can manually define @font-face in CSS and still register those fonts with Makeswift (see alternative below).

When to use next/font vs. @font-face

Choosing the right approach depends on where your fonts come from and how much control you need.

  • Use next/font/google when the font you want is available in the Google Fonts library. This is the simplest option since no font files need to live in your project.
  • Use next/font/local when you have custom brand fonts, licensed fonts, or any web font files you want to serve directly from your app. This ensures fonts are self-hosted and fully under your control.
  • Use plain @font-face in CSS if you need complete control over font loading behavior or prefer not to rely on the next/font module. This works fine, but you will not get the automatic optimizations that next/font provides.

Once you have chosen an approach, follow the instructions below for setup.

Adding Google Fonts

The simplest way for adding Google Fonts to your Next.js app is with the next/font/google module.

app/layout.tsx
1import { Roboto } from 'next/font/google'
2
3// If loading a variable font, you don't need to specify the font weight
4const roboto = Roboto({
5  subsets: ['latin'],
6  display: 'swap',
7})
8
9export default function RootLayout({
10  children,
11}: {
12  children: React.ReactNode
13}) {
14  return (
15    <html lang="en" className={roboto.className}>
16      <body>{children}</body>
17    </html>
18  )
19}

Follow the Registering fonts with Makeswift section to make sure these fonts show up in the visual builder.

Adding custom fonts

The following steps will walk you through adding custom fonts to your Next.js app and assumes:

  • Variable font file stored in the /public/fonts/ directory
  • You’ll register the same font family in Makeswift so it’s selectable in the builder

Using next/font

app/layout.tsx
1import './globals.css'
2import localFont from 'next/font/local'
3
4const satoshi = localFont({
5  src: "../public/fonts/Satoshi-Variable.woff2",
6  display: "swap",
7})
8
9export default function RootLayout({ children }: { children: React.ReactNode }) {
10  return (
11    <html lang="en">
12      <body className={satoshi.className}>{children}</body>
13    </html>
14  )
15}

Using @font-face in CSS

globals.css
1@font-face {
2  font-family: "Satoshi";
3  src: url("/fonts/Satoshi-Variable.woff2") format("woff2");
4  font-style: normal;
5  font-display: swap;
6}

Follow the Registering fonts with Makeswift section to make sure these fonts show up in the visual builder.

Registering fonts with Makeswift

Regardless of how you add fonts to your Next.js app, you need to register them with Makeswift in the API handler so they are available in the builder.

The following examples show how to register either a custom or licensed font (non-Google), or a Google Font that has been added to Next.js for use in the builder:

pages/api/[...makeswift].ts
1import { MakeswiftApiHandler } from "@makeswift/runtime/next/server";
2import { strict } from "assert";
3
4import { runtime } from "../../../../../makeswift/runtime";
5
6strict(
7  process.env.MAKESWIFT_SITE_API_KEY,
8  "MAKESWIFT_SITE_API_KEY is required"
9);
10
11export default MakeswiftApiHandler(process.env.MAKESWIFT_SITE_API_KEY, {
12  runtime,
13  getFonts() {
14    return [
15     {
16    family: 'Satoshi',
17    variants: [
18      { weight: '400', style: 'normal', src: '/fonts/Satoshi-Variable.woff2' },
19      { weight: '700', style: 'normal', src: '/fonts/Satoshi-Variable.woff2' },
20    ],
21  },
22    ];
23  },
24});

FAQ

Do I have to use the next/font module?

No. Makeswift doesn’t require it. Use next/font for convenience and performance, or use plain @font-face in CSS. Both work as long as the font files are available and you register them using the API handler.

Can I use fonts that aren’t from Google?

Yes. Any properly licensed web font files (e.g., .woff2) are supported. You can load them locally and register them with Makeswift so editors can select them in the builder.