Reading time: 4 min read
How to Install Custom Local Fonts in the Sitecore JSS Next.js Starter Kit
Skip the headaches with this complete Next.js and Storybook local font setup guide.
Start typing to search...
This blog is a quick guide for you to setup the local custom font onto the Sitecore JSS Next.js starter kit, so you won’t be in pain figuring that one out yourself. We will include the setup on Next.js with Tailwind CSS, and Storybook if you have that.
In the guide, things in [] will be your responsibility to name them.
First you should move fonts you want to install under headapps\nextjs-starter\public\fonts\[font-family] .
The working format of the font file are:
Then create a font-config.ts file to store the font face setting used for next/font.
import localFont from 'next/font/local';
/* modify the src based on the files you want to use */
export const yourFontFamily = localFont({
src: [
{
path: '../public/fonts/[font-family]/[filename]',
weight: '200',
style: 'normal',
},
{
path: '../public/fonts/[font-family]/[filename]',
weight: '400',
style: 'normal',
},
{
path: '../public/fonts/[font-family]/[filename]',
weight: '600',
style: 'normal',
},
],
});
And you need to update src/Layout.tsx so the site will recognize it.
/* With other imports */
import { yourFontFamily } from '[path-of-font-config]';
/* ... */
return(
/* ... */
/* add the custom font to the className of outer element of the body */
<div
className={`${yourFontFamily.variable} ${barrio.variable} ${sourceSansPro.variable} ${mainClassPageEditing}`}
>
/* Just an example of what should be in this */
/* I'm apply tailwindcss custom class font-[yourFontFamily]to make the default font as it */
/* The setup is in next step */
<header className="font-[yourFontFamily]">
<div id="header">
{route && <Placeholder name="headless-header" rendering={route} />}
</div>
</header>
<main className="font-[yourFontFamily]">
<div id="content" style={{ minHeight: heightWithoutFooter + 'px' }}>
{route && <Placeholder name="headless-main" rendering={route} />}
</div>
</main>
<footer className="font-[yourFontFamily]">
<div id="footer">
{route && <Placeholder name="headless-footer" rendering={route} />}
</div>
</footer>
</div>
/* ... */
);
If you want to apply the font to Tailwind CSS’s classes, go to the tailwind.config.js if you are using Tailwind CSS 3, and edit the fontFamily:
module.exports = {
/* ... */
theme: {
extend: {
/* ... */
fontFamily: {
heading: ['var(--font-your-font-family)', 'fallback-font'],
body: ['var(--font-your-font-family)', 'fallback-font'],
yourFontFamily: ['var(--font-your-font-family)', 'fallback-font']
}
/* ... */
}
}
};
Then when you use a class like heading-xl, copy-sm, their font family will be the custom one.
As for Tailwind CSS 4, you can check this discussion.
First go to headapps\nextjs-starter\.storybook\main.ts to add the public folder in staticDirs array, so Storybook can access the font files.
import type { StorybookConfig } from '@storybook/nextjs';
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
/* your addons */
],
framework: {
name: '@storybook/nextjs',
options: {},
},
staticDirs: ['../src/stories/assets', '../public'],
};
export default config;
Create preview.css under headapps\nextjs-starter\.storybook\ to store the font face of your fonts.
/* Other stuff you had */
<style>
@font-face {
font-family: 'yourFontFamily';
src: url('/fonts/[font-family]/[filename]') format('[font-format]');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'yourFontFamily';
src: url('/fonts/[font-family]/[filename]') format('[font-format]');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'yourFontFamily';
src: url('/fonts/[font-family]/[filename]') format('[font-format]');
font-weight: 600;
font-style: normal;
font-display: swap;
}
:root {
--font-ppmori: 'yourFontFamily';
}
</style>
Then in your preview.js or preview.ts or preview.tsx (depend on which you have) under headapps\nextjs-starter\.storybook\ , add this line of import:
/*Other imports */
import './preview.css';
/* Other codes */
Hopefully this guide will help you to install your desired local fonts on your Sitecore JSS project and Storybook painlessly. Enjoy your brand new fonts!