Registering fonts

Registering fonts is a way to add fonts to the builder so you can select them in the font dropdown.

You still need to install the font in the Next.js app by yourself. Some common ways to do it are either by adding a font face declaration in the CSS file, or by adding a Google Font snippet in the <head> tag.

Registering a font enables you to:

  • Use a custom font that's not available on Google Fonts in the builder.
  • Use a font that's already installed on your Next.js app in the builder.

If your font is available on Google Fonts, or if you haven't installed your font yet, it's easier to add the font directly from the builder. We will add and install the font automatically for you.

Manage fonts dialog

AnchorExamples

AnchorRegistering a custom font

In this example, we have a custom font installed called Metalsmith that's located in public/fonts/Metalsmith.woff. We can register this font by modifying MakeswiftApiHandler located in pages/api/makeswift/[...makeswift].ts.:

export default MakeswiftApiHandler('<makeswift_site_api_key>', {
  getFonts: () => [
    {
      family: 'Metalsmith',
      variants: [{ weight: '400', style: 'normal', src: '/fonts/Metalsmith.woff' }],
    },
  ],
})

Once we do that, we can use the font in the builder:

Register custom font

The src field is optional. It will be used to load the font and preview the font in the dropdown. The src field could be either a relative URL or an absolute URL. If you don't provide the src field, the font won't be loaded in the font selection dropdown, but you can still select the font like normal.

Note that adding the font to MakeswiftApiHandler will only make the font be available in the Makeswift builder. Make sure that you already installed the font manually in your Next.js app. One way to do it is by adding this code to global.css file:

@font-face {
  font-family: 'Metalsmith';
  src: url('/fonts/Metalsmith.woff') format('woff');
}

AnchorRegistering a Google Font

In this example, we have a Google Font installed called IBM Plex Mono. We can register this font by modifying MakeswiftApiHandler located in pages/api/makeswift/[...makeswift].ts.:

export default MakeswiftApiHandler('<makeswift_site_api_key>', {
  getFonts: () => [
    {
      family: 'IBM Plex Mono',
      variants: [{ weight: '400', style: 'normal' }],
    },
  ],
})

Once we do that, we can use the font in the builder:

Register google font

When you register a font that's available on Google Font, we'll load the font automatically so you don't have to provide the src field.

Note that adding the font to MakeswiftApiHandler will only make the font be available in the Makeswift builder. Make sure that you already installed the font manually in your Next.js app. One way to do it is by adding this code to a Custom Document <Head/>:

<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet" />

AnchorRegistering a font with many variants

In this example, we have Google Font installed called IBM Plex Mono with many variants. We can register this font by modifying MakeswiftApiHandler located in pages/api/makeswift/[...makeswift].ts.:

export default MakeswiftApiHandler('<makeswift_site_api_key>', {
  getFonts: () => [
    {
      family: 'IBM Plex Mono',
      variants: [
        { weight: '400', style: 'normal' },
        { weight: '400', style: 'italic' },
        { weight: '500', style: 'normal' },
        { weight: '500', style: 'italic' },
      ],
    },
  ],
})

Once we do that, we can use the variant in the builder:

Register font variant

We'll convert each variant into a readable format:

WeightLabel
100Thin
200Extra light
300Light
400Regular
500Medium
600Semi bold
700Bold
800Extra bold
900Black

Note that adding the font to MakeswiftApiHandler will only make the font be available in the Makeswift builder. Make sure that you already installed the font manually in your Next.js app. One way to do it is by adding this code to a Custom Document <Head/>:

<link
  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400;1,500&display=swap"
  rel="stylesheet"
/>

AnchorCustom label

The builder will use the family value in the font family dropdown by default. To add a custom label, use the label option.

export default MakeswiftApiHandler('<makeswift_site_api_key>', {
  getFonts: () => [
    {
      family: 'Metalsmith',
      label: 'Stylish Custom Typeface',
      variants: [{ weight: '400', style: 'normal', src: '/fonts/Metalsmith.woff' }],
    },
  ],
})

Register a font with a custom label

AnchorAPI

AnchorTypes

type MakeswiftApiHandlerConfig = {
  getFonts?: () => Fonts | Promise<Fonts>
}

type Fonts = Font[]

type Font = {
  family: string
  label?: string
  variants: FontVariant[]
}

type FontVariant = {
  weight: string
  style: 'italic' | 'normal'
  src?: string
}