I integrated the Gilroy font into my application, but I am facing issues with tailwindcss not being able to style the text properly. The font appears too thin in all elements such as paragraphs and headers.
Here is the file structure for reference: https://i.stack.imgur.com/T8OPH.png
Snippet from layout.tsx file:
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
const gilroy = localFont({
src: [
{
path: "./fonts/gilroy/Gilroy-Thin.ttf",
weight: "100",
style: "normal",
},
{
path: "./fonts/gilroy/Gilroy-ThinItalic.ttf",
weight: "100",
style: "italic",
},
// More font configurations...
export const metadata: Metadata = {
title: "Create Next App",
description: "Description",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={gilroy.className}>{children}</body>
</html>
);
}