How to Install Custom Local Fonts in the Sitecore JSS Next.js Starter Kit

Having Issues While Setting Up the Local Fonts in the Sitecore JSS Next.js Starter Kit?

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.

Complete Implementation Guide

In the guide, things in [] will be your responsibility to name them.

Setting Up Custom Fonts in Next.js with Tailwind CSS

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:

• WOFF2 (.woff2) - MOST RECOMMENDED
  • Best compression (30-50% smaller than WOFF)
  • Excellent browser support (95%+ modern browsers)
  • Fastest loading
  • Format: format('woff2')
• WOFF (.woff) - GOOD FALLBACK
  • Good compression
  • Universal browser support (including older browsers)
  • Format: format('woff')
• TTF (.ttf) - FALLBACK FOR OLDER BROWSERS
  • Larger file sizes (no compression)
  • Universal compatibility
  • Format: format('truetype')
• OTF (.otf) - ALTERNATIVE TO TTF
  • Similar to TTF but with OpenType features
  • Good browser support
  • Format: format('opentype')
• EOT (.eot) - IE LEGACY ONLY
  • Only for Internet Explorer 8-11
  • Rarely needed now
  • Format: Not specified in modern usage

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.

Configuring Fonts for Storybook Development

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 */

And Your Custom Fonts Are Ready!

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!