Using local fonts is a bit of a pain Next.js + Tailwind. Is there an easier way?

Answered

Semipalmated Plover posted this in #help-forum

Semipalmated PloverOP

2023-10-01T13:26:41.000Z

Here's my current setup for some local fonts:

globals.css

@font-face { font-family: "NeueMontreal-Regular"; src: url("/fonts/NeueMontreal-Regular.otf"); }
@font-face {font-family: "NeueMontreal-MediumItalic"; src: url("/fonts/NeueMontreal-MediumItalic.otf");}
@font-face { font-family: "NeueMontreal-Medium"; src: url("/fonts/NeueMontreal-Medium.otf"); }
@font-face { font-family: "NeueMontreal-LightItalic"; src: url("/fonts/NeueMontreal-LightItalic.otf"); }
@font-face { font-family: "NeueMontreal-Light"; src: url("/fonts/NeueMontreal-Light.otf"); }
@font-face { font-family: "NeueMontreal-Italic"; src: url("/fonts/NeueMontreal-Italic.otf"); }
@font-face { font-family: "NeueMontreal-BoldItalic"; src: url("/fonts/NeueMontreal-BoldItalic.otf"); }
@font-face { font-family: "NeueMontreal-Bold"; src: url("/fonts/NeueMontreal-Bold.otf"); }
@font-face { font-family: "MonumentExtended-Ultrabold"; src: url("/fonts/MonumentExtended-Ultrabold.otf"); }
@font-face { font-family: "MonumentExtended-Regular"; src: url("/fonts/MonumentExtended-Regular.otf"); }

.neue-regular { font-family: "NeueMontreal-Regular"; }
.neue-light { font-family: "NeueMontreal-Light"; }
.neue-light-italic { font-family: "NeueMontreal-LightItalic"; }
.neue-medium { font-family: "NeueMontreal-Medium"; }
.neue-medium-italic { font-family: "NeueMontreal-MediumItalic"; }
.neue-italic { font-family: "NeueMontreal-Italic"; }
.neue-bold { font-family: "NeueMontreal-Bold"; }
.neue-bold-italic { font-family: "NeueMontreal-BoldItalic"; }
.monument-regular { font-family: "MonumentExtended-Regular"; }
.monument-ultrabold { font-family: "MonumentExtended-Ultrabold"; }

Typically, I would just use Google Fonts with a simple @import in the CSS and use the font name directly. Then, in the Tailwind JSX, I could simply write font-bold and it would smartly use the correct weight of the Google Font for the given element. Unfortunately, this method doesn't seem to be supported by Next.js.

With my setup above, using font weights is not that easy. The way I'm going about using the fonts feels wrong.

Am I going about this the right way? Is there a better way to work with local fonts? Should I host these fonts on a CDN?

Answered by Semipalmated Plover

Thx for the response, I ended up uploading all my fonts to my VPS

View full answer

4 Replies

Dayo

2023-10-01T16:59:49.000Z

i'd do this. first, create a folder for your fonts and put the font files there. then create an index.ts file in the directory and do sth like

import localFont from 'next/font/local';

const tomatoGrotesk = localFont({
  variable: '--font-tomatoGrotesk',
  src: [
    {
      path: './TomatoGrotesk-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './TomatoGrotesk-Medium.woff2',
      weight: '500',
      style: 'normal',
    },
    {
      path: './TomatoGrotesk-SemiBold.woff2',
      weight: '600',
      style: 'normal',
    },
    {
      path: './TomatoGrotesk-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
  ],
});

export {tomatoGrotesk};

then inside the Layout file, import your font and use (this is useful if you have only 1 font, otherwise extend the fontfamily in the tailwind config)

import {tomatoGrotesk} from '@/assets/fonts';

<body className={`${tomatoGrotesk.className}`}>
     ...
</body>

and in your tailwind config, you can extend the font family

fontFamily: {
        tomatoGrotesk: ['var(--font-tomatoGrotesk)'],
        (...other fonts...)
      },

now, you can reference "font-tomatoGrotesk"inside your pages x components.

@Dayo i'd do this. first, create a folder for your fonts and put the font files there. then create an index.ts file in the directory and do sth like import localFont from 'next/font/local'; const tomatoGrotesk = localFont({ variable: '--font-tomatoGrotesk', src: [ { path: './TomatoGrotesk-Regular.woff2', weight: '400', style: 'normal', }, { path: './TomatoGrotesk-Medium.woff2', weight: '500', style: 'normal', }, { path: './TomatoGrotesk-SemiBold.woff2', weight: '600', style: 'normal', }, { path: './TomatoGrotesk-Bold.woff2', weight: '700', style: 'normal', }, ], }); export {tomatoGrotesk}; then inside the Layout file, import your font and use (this is useful if you have only 1 font, otherwise extend the fontfamily in the tailwind config) import {tomatoGrotesk} from '@/assets/fonts'; <body className={`${tomatoGrotesk.className}`}> ... </body> and in your tailwind config, you can extend the font family fontFamily: { tomatoGrotesk: ['var(--font-tomatoGrotesk)'], (...other fonts...) }, now, you can reference `"font-tomatoGrotesk"`inside your pages x components.

Semipalmated PloverOP

2023-10-01T19:18:43.000Z

Thx for the response, I ended up uploading all my fonts to my VPS

Answer

Semipalmated PloverOP

2023-10-01T19:19:05.000Z

Then imported them in _document.js