.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:
- Adding the font files to your Next.js app
- Registering the fonts with Makeswift in the API handler
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 Fontsnext/font/local
for custom or licensed fonts (non-Google)
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).
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 thenext/font
module. This works fine, but you will not get the automatic optimizations thatnext/font
provides.
Adding Google Fonts
The simplest way for adding Google Fonts to your Next.js app is with thenext/font/google
module.
- App Router
- Pages Router
app/layout.tsx
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 Router
- Pages Router
app/layout.tsx
Using @font-face
in CSS
globals.css
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.- Custom Fonts
- Google Fonts
pages/api/[...makeswift].ts
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.