Using next/font/local Questions?`

Question

Hello i am trying to use next/fonts/local to correctly optimise and load my local fonts, Currently i am my font file

ProzaLibre-BoldItalic.ttf

in the location

public/fonts/ProzaLibre

And a

src/Styles/fonts.ts

file

import localFont from 'next/font/local'

// Load Proza Libre Bold Italic from the `public/fonts/` directory
export const prozaLibreBoldItalic = localFont({
  src: 'fonts/ProzaLibre/ProzaLibre-BoldItalic.ttf',
  weight: '700',
  style: 'italic',
  variable: '--font-proza-libre-bold-italic',
})

And trying to use it in my Button component

src/Components/Button/index.tsx

'use client'

import clsx from 'clsx'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { prozaLibreBoldItalic } from '@/Styles/fonts'

type ButtonProps = {
  href: string
  children: React.ReactNode
  className?: string
}

const UnderlineButton = ({ href, children, className }: ButtonProps) => {
  const pathname = usePathname()

  const isActive = pathname === href

  return (
    <Link
      href={href}
      className={clsx(
        prozaLibreBoldItalic.className,
        'relative inline-block px-4 py-2 text-sm font-bold text-gray-700 uppercase transition-all sm:text-base md:text-lg lg:text-xl',
        'after:absolute after:bottom-0 after:left-0 after:h-[2px] after:bg-gray-700 after:transition-all',
        'hover:after:w-full focus:after:w-full active:after:w-full',
        isActive ? 'after:w-full' : 'after:w-0',
        className
      )}
    >
      {children}
    </Link>
  )
}

export default UnderlineButton

But this doesn't seem to work as we hit the error:

GET / 500 in 45ms
 ⨯ ./src/Styles
Font file not found: Can't resolve 'fonts/ProzaLibre/ProzaLibre-BoldItalic.ttf'

joulev · Answer

It is the file system path not the URL path.

If you want to keep the font in the public folder then the path looks something like this: ../../public/fonts/…

But you don’t have to put it in the public folder, just put it in the same folder where you call next/font/local and use "./font.ttf" as the path.

Using next/font/local Questions?`

1 Reply