First time using local fonts with next/font need help.
Answered
Thrianta posted this in #help-forum
ThriantaOP
I am using /src directory configured like this
├── public
│ ├── fonts
│ │ └── AEROTIS.ttf
│ └── images
├── src
│ │── layout.tsx
│ ├── components
│ │ ├── global
│ │ │ └── Sidebar.jsx
import localFont from 'next/font/local';
const myFont = localFont({
src: 'public/fonts/AEROTIS.ttf',
weight: '400',
});
const Sidebar = () => {
return (
<div
className={
>
//Code for Nav bar
</div>
);
};
export default Sidebar;
But im getting this error
Failed to compile
src\components\global\Sidebar.jsx
Module not found: Can't resolve './public/fonts/AEROTIS.ttf'
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./src/components/global/Sidebar.jsx
./src/app/layout.tsx
I cant figure out when im doing wrong
├── public
│ ├── fonts
│ │ └── AEROTIS.ttf
│ └── images
├── src
│ │── layout.tsx
│ ├── components
│ │ ├── global
│ │ │ └── Sidebar.jsx
import localFont from 'next/font/local';
const myFont = localFont({
src: 'public/fonts/AEROTIS.ttf',
weight: '400',
});
const Sidebar = () => {
return (
<div
className={
bg-steeldark-900 flex h-full w-32 flex-col items-center justify-start ${myFont.className}}>
//Code for Nav bar
</div>
);
};
export default Sidebar;
But im getting this error
Failed to compile
src\components\global\Sidebar.jsx
Module not found: Can't resolve './public/fonts/AEROTIS.ttf'
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./src/components/global/Sidebar.jsx
./src/app/layout.tsx
I cant figure out when im doing wrong
Answered by joulev
it's the relative path in the file system, so in your case it would be
src: "../../../public/fonts/AEROTIS.ttf"7 Replies
@Thrianta I am using /src directory configured like this
├── public
│ ├── fonts
│ │ └── AEROTIS.ttf
│ └── images
├── src
│ │── layout.tsx
│ ├── components
│ │ ├── global
│ │ │ └── Sidebar.jsx
import localFont from 'next/font/local';
const myFont = localFont({
src: 'public/fonts/AEROTIS.ttf',
weight: '400',
});
const Sidebar = () => {
return (
<div
className={`bg-steeldark-900 flex h-full w-32 flex-col items-center justify-start ${myFont.className}`}
>
//Code for Nav bar
</div>
);
};
export default Sidebar;
But im getting this error
Failed to compile
src\components\global\Sidebar.jsx
Module not found: Can't resolve './public/fonts/AEROTIS.ttf'
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./src/components/global/Sidebar.jsx
./src/app/layout.tsx
I cant figure out when im doing wrong
it's the relative path in the file system, so in your case it would be
src: "../../../public/fonts/AEROTIS.ttf"Answer
advice: just put the font file where it is used directly. in this case put the ttf file inside
src/components/globalit's not required to put it in the public folder
ThriantaOP
Okay makes sense thanks a bunch
ThriantaOP
Finally got to confirm this worked
however after all the effort the font looks like crap on the page, i mean it looks cool i guess but its going to be unreadable to most
I also tried putting it in several places I couldnt figure out where the pathing started from and I thought back to root from my current location was 2 not 3 so I was never able to figure it out. Thanks alot for the help. Its good to know how to use this