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.
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:
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:
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:
We'll convert each variant into a readable format:
Weight | Label |
---|---|
100 | Thin |
200 | Extra light |
300 | Light |
400 | Regular |
500 | Medium |
600 | Semi bold |
700 | Bold |
800 | Extra bold |
900 | Black |
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' }],
},
],
})
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
}