I want to make ‘Roboto’ global font for my Next.js project. Here is my main layout file where I was trying to make it accoding to documentation.
<code>import type { Metadata } from "next";
import { Roboto } from "next/font/google";
import "./globals.scss";
const roboto = Roboto({
weight: "400",
subsets: ["latin"],
variable: "--font-roboto",
display: "swap",
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={roboto.className}>{children}</body>
</html>
);
}
</code>
<code>import type { Metadata } from "next";
import { Roboto } from "next/font/google";
import "./globals.scss";
const roboto = Roboto({
weight: "400",
subsets: ["latin"],
variable: "--font-roboto",
display: "swap",
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={roboto.className}>{children}</body>
</html>
);
}
</code>
import type { Metadata } from "next";
import { Roboto } from "next/font/google";
import "./globals.scss";
const roboto = Roboto({
weight: "400",
subsets: ["latin"],
variable: "--font-roboto",
display: "swap",
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={roboto.className}>{children}</body>
</html>
);
}
Here is my global.scss file
<code>* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: var(--font-roboto);
}
</code>
<code>* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: var(--font-roboto);
}
</code>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: var(--font-roboto);
}
It’s working for default Home route, but not for the rest of the routes.