Breaking News: Grepper is joining You.com. Read the official announcement!

use local font inside public folder in nextjs

Sakar Hamasaeed answered on March 17, 2023 Popularity 10/10 Helpfulness 3/10

answer use local font inside public folder in nextjs

related add local font in nextjs app directory

use local font inside public folder in nextjs

Comment

//1-Create a new folder called "fonts" inside the "public" directory of 
//your Next.js project.

/*2-Add your font files to the "fonts" directory. For example, if you
have a font file called "myfont.ttf", you would add it to the "fonts" 
directory as follows: "public/fonts/myfont.ttf"
*/

//3-globals.css
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.myFontFamily {
  font-family: 'MyFont', sans-serif;
}

//4-index.jsx
<div className="myFontFamily">Hello World!</div>

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: custom-font javascript local next public

Link to this answer
Share Copy Link

Contributed on Mar 17 2023

Sakar Hamasaeed

0 Answers Avg Quality 2/10

Closely Related Answers

add local font in nextjs app directory

Comment

//app/layout.tsx
import type { Metadata } from "next";
import { Roboto, Rubik } from "next/font/google";
import localFont from "next/font/local";

import "./globals.css";
import { metaDataInfo } from "@/lib/info";

//Font files can be colocated inside of 'app'
const aktivGrotesk = localFont({
  src: [
    { path: "./AktivGrotesk-Light.ttf", style: "normal", weight: "300" },
    { path: "./AktivGrotesk-Medium.ttf", style: "normal", weight: "500" },
    { path: "./AktivGrotesk-Regular.ttf", style: "normal", weight: "400" },
    { path: "./AktivGrotesk-Bold.ttf", style: "normal", weight: "600" },
    { path: "./AktivGrotesk-XBold.ttf", style: "normal", weight: "800" },
  ],
});
const roboto = Rubik({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700", "800", "900"],
  style: ["normal", "italic"],
});

export const metadata: Metadata = {
  title: metaDataInfo.title,
  description: metaDataInfo.description,
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${aktivGrotesk.className} bg-background`}>
        {children}
      </body>
    </html>
  );
}

Popularity 8/10 Helpfulness 8/10 Language javascript

Source: Grepper

Tags: add directory director

Link to this answer
Share Copy Link

Contributed on Feb 16 2024

Shirshak Kandel

0 Answers Avg Quality 2/10

use local font inside public folder in nextjs

Contents

More Related Answers

use local font inside public folder in nextjs

Closely Related Answers

add local font in nextjs app directory

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.