I'm starting up a project using Nextjs and TailwindCSS, and been trying to get the fonts to work using variables - however it is not.
My layout.js:
import localFont from "next/font/local";
// Font files can be colocated inside of `app`
const customFont = localFont({
src: [
{
path: "./components/typography/localFont/exConSemiBold.ttf",
weight: "normal",
style: "normal",
},
],
variable: "--custom",
});
export default function RootLayout({ children }) {
return (
<html lang="en" className={`${customFont.variable} font-sans`}>
<body>{children}</body>
</html>
);
}
My tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
fontFamily: {
sans: ["var(--custom)"],
},
colors: {
},
},
},
plugins: [require("@tailwindcss/typography")],
};
Component in which I am trying to use the font:
(app/Car/page.js)
export default function Car() {
return <p className="font-sans">This is a car</p>;
}
It seems nothing gets applied by using the class font-sans.
The font loads in the generated CSS, and using the inspector to manually set the font-family to the font name generated by the variable, it shows.
Some weird things:
- Setting
customFont.classNameto the document, instead ofcustomFont.variablethe font loads properly - I tried using
font-customand other namings instead offont-sans, with no success - Tried different font files without any success
This is resolved.
The issue was due to not importing
import "./globals.css"at the top oflayout.js(which held all base & utility css).