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

add local font in nextjs app directory

Shirshak Kandel answered on March 17, 2023 Popularity 9/10 Helpfulness 7/10

answer add local font in nextjs app directory

related use local font inside public folder in nextjs

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 9/10 Helpfulness 7/10 Language javascript

Source: Grepper

Tags: add directory javascript local

Link to this answer
Share Copy Link

Contributed on Feb 16 2024

Shirshak Kandel

0 Answers Avg Quality 2/10

Closely Related Answers

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 cust

Link to this answer
Share Copy Link

Contributed on Mar 17 2023

Sakar Hamasaeed

0 Answers Avg Quality 2/10

add local font in nextjs app directory

Contents

More Related Answers

add local font in nextjs app directory

Closely Related Answers

use local font inside public folder in nextjs

Grepper

Documentation

Social

Legal

Contact

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