Encountering an issue when attempting to incorporate local external fonts into a nextJS project

Currently, I'm working on incorporating a local font into my NextJS + TailwindCSS project. The font has been placed inside the public/fonts directory and I am closely following the provided documentation.

Here is a snippet of my code:

import localFont from '@next/font/local'
const inter = Inter({
    subsets: ['latin'],
})

const recoleta = localFont({
    src: 'fonts/Recoleta-Regular.ttf',
    fontFamily: 'Recoleta',
})

Unfortunately, upon running the code, an error message appears in the terminal indicating:

I would greatly appreciate guidance on where specifically to add the font file or how to perfectly configure it for successful implementation.

Module not found: Can't resolve './fonts/Recoleta-Regular.ttf'
javascriptnext.jsfonts

Answer №1

Encountered an error and resolved it by configuring the setup in this manner. Utilized https://nextjs.org/docs/api-reference/next/font#src for guidance. Utilizing the app directory.

page.tsx:

import CustomFont from '@next/font/local'

const customFont = CustomFont({
  src: '../public/fonts/cfont.ttf',
  variable: '--font-cfont',
})

export default function Home() {
  return (
    <div className={`${customFont.variable}`}>
      <div className="font-cfont">
        Test
      </div>
    </div>
  )
}

tailwind.config.js:


const { fontFamily } = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        cfont: ['var(--font-cfont)', ...fontFamily.sans],
      },
    },
  },
  plugins: [],
}

Answer №2

In the event that an individual encounters this problem when launching a NextJs App for the first time, they can resolve it by entering this command in the terminal:

npx @next/codemod built-in-next-font

For further assistance, refer to the following link: https://nextjs.org/docs/messages/built-in-next-font

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Placing a component within a .jsx file instead of utilizing a .css file for positioning

Seeking a way to position a component within a .jsx-file, rather than a .css-file, to accommodate multiple instances of the same component performing various tasks on different parts of the page. Avoiding duplication of files with minor CSS class changes, ...

javascriptcssreactjspositioncss-position

Steps to convert a combined object data types sent via POST into an integer:

I have a mixed data types that have been POSTed to an API. I am looking to use parseInt() on certain data elements (Price, vat, status, company_id). When attempting to POST the form, I receive an error: POST https://api.factarni.tn/article/create 420 Furt ...

javascriptreactjsreact-hooks

Bootstrap 4 modal experiencing issues with the form end tag functionality

Currently, I am facing an issue while attempting to incorporate a confirmation delete feature using a Bootstrap 4 modal in my Laravel project. The problem arises when the modal is opened, and the submit button fails to function. Upon inspecting the browser ...

javascripttwitter-bootstraplaravelbootstrap-4bootstrap-modal

How can I populate a form in Meteor with data from a MongoDB collection that was previously inserted?

Recently, I completed constructing a lengthy form field where users can enter a plethora of information. This form consists of various text and number fields, radio button sets, and checkbox groups. The data is successfully saved in a Mongo collection with ...

javascriptformsmongodbmeteor

Scroll Function Activates Repeatedly Instead of Triggering Just Once

I'm working on a website that smoothly scrolls to each section with a single scroll action. This involves detecting whether the page is being scrolled up or down. The code I've written seems to address this issue, but it triggers the scroll actio ...

javascriptjqueryarraysscrollinfinite-scroll

Changing the time zone of a UTC date string while preserving the original format

Is there a way to convert a UTC date string to the current user's timezone while keeping the original date string format intact? Take for example the following code snippet that accomplishes this: var data = '2017-04-24 12:06:37'; var date ...

javascriptjquerydatetimezone

Encountering a RangeError in FusionCharts with VueJS, I faced the issue of exceeding the maximum call stack size while trying to

After inserting a clip array into xAxis, I encountered a RangeError. Has anyone else experienced this issue? I have set up a repository to demonstrate the bug: https://github.com/Ic3m4n34/fusioncharts-bug (App.vue) Does anyone have suggestions on how to ...

javascriptvue.jsfusioncharts

Exploring Node.js: A Comparison of Promises and Callbacks Versus Synchronous

I have knowledge about Promises and Callbacks. However, I am curious to know, Is it considered good practice to use synchronous modules such as Sync, synchronize, etc.,? What are the appropriate scenarios or use cases for using Sync and in which scenario ...

javascriptnode.jssynchronization

React - group several elements within a wrapping container

I am dealing with an array of words that make up sentences: let words = [ { "start_time": "2.54", "end_time": "3.28", "alternatives": [ { "confidence": "1.0", ...

javascriptreactjs

When preparing for deployment, issues may arise with the module package.json

Encountering an issue with the production build - when running "cross-env NODE_ENV=production API_V=production npm run build," I'm getting an error from react-player: ERROR in ./node_modules/react-player/lib/ReactPlayer.js Module build failed: Re ...

javascriptnode.jsreactjsreact-player

Are there any jQuery plugins available for creating a currency input field specifically for the United States Dollar?

Looking for advice on creating an input field for a U.S. Dollar amount that includes AJAX feedback to format it with a "$" sign and maintain two decimal places, while disallowing letters and non-digits. Any suggestions for existing projects or tips on ho ...

javascriptjqueryhtml

Troubleshooting: The issue of receiving a 403 error when trying to access

I'm currently using Codeigniter 3 and have encountered an issue with a script. When the code is in my HTML file, everything works perfectly fine. However, if I move the code to an external file, I receive a 403 error. The location of my JavaScript fi ...

javascriptphpjqueryajaxcodeigniter

Is it possible to load images top to bottom?

Is there a way to make browsers load images from the bottom to the top? Imagine I have an extremely long image that takes 60 seconds to load. The content is designed to be read from bottom to top. Is there any trick I can use to ensure that the image load ...

javascripthtmlcssbrowserimage-loading

"Experience the power of Vuejs 3 with Composition API: see the incredible render capabilities of v-model with

In my exploration of Vue.js 3, I ventured into creating reusable and composable hooks which I named useCounter. This function returns an object containing the count (ref) and increment. Interestingly, when I use v-model.number="counter.count", it ...

javascriptvue.jsvuejs3

The emoji lexicon is having trouble locating the modules for .emojis

Currently, I am attempting to utilize the emoji-dictionary in my project, but I am encountering issues with it not running properly. Specifically, I am encountering the index.js:2 Uncaught Error: Cannot find module "./emojis" error message. ...

javascriptreactjsemoji

The hunt is on for greater value within the index

My requirement is to check the text content of a box. If it matches any value stored in an ARRAY, then I have to execute a specific action. var ARRAY1 = ["Saab", "Volvo", "BMW"]; if (select[i].innerHTML.indexOf('ARRAY1') != -1){//code here} ...

javascriptarraysindexof

Import a Module in Next.js with FileSystem (Fs) Dependency

When attempting to import glsl (import glsl from "babel-plugin-glsl/macro";), I encountered an issue where I received a "Module not found: Can't resolve 'fs'" error, or after configuring my next.config.js file with module ...

node.jsnext.jsreact-three-fiber

The vuex store does not activate in routed components

After setting up my vuex store and ensuring that everything is functioning properly, I encountered an issue where I can only commit mutations in components that are directly imported into src App.vue. For instance, the resetState function in Header.vue su ...

javascripttypescriptvue.js

"Using only JavaScript to target and manipulate child elements within the

I'm currently transitioning from using jQuery to pure JavaScript, and I've just started but am encountering difficulties. Specifically, I am unsure how to select child elements in the DOM. <div class="row-button"> <input type="submi ...

javascript

The page abruptly jumps to the top whenever I display an ID element

Im currently facing an issue with my webpage where everything seems to be functioning properly, except for one problem. When I set a hidden element to be shown, the page suddenly jolts upwards. Although the previously concealed element is successfully disp ...

javascriptjqueryjquery-ui