Next.js Discord

Discord Forum

Nextjs font change to time new roman whenever I add font variable.

Unanswered
Scottish Deerhound posted this in #help-forum
Open in Discord
Scottish DeerhoundOP
I import the font in _app.js 

import Layout from "@/components/Layouts/Layout";
import store from "@/store/store";
import "@/styles/globals.css";
import { Manrope, Open_Sans } from "next/font/google";
import { Provider } from "react-redux";

const openSans = Open_Sans({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700", "800"],
  variable: "--font-openSans",
});

const manrope = Manrope({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700", "800"],
  variable: "--font-manrope",
});

export default function App({ Component, pageProps, router }) {
  const getLayout = Component.getLayout || ((page) => <Layout children={page} />);

  return (
    <Provider store={store}>
      {getLayout(
        <main className={`${openSans.variable} ${openSans.manrope}`}>
          <Component {...pageProps} />
        </main>
      )}
    </Provider>
  );
}


And added the font variables to tailwind.config.js
/** @type {import('tailwindcss').Config} */
const colors = require("tailwindcss/colors");

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        openSan: ["var(--font-openSan"],
        manrope: ["var(--font-manrope"],
      },
      colors: {
        primary: colors.blue,
      },
    },
  },
  plugins: [require("@tailwindcss/forms")],
};


And I am also using tailwind component to share css files across folders. Used postcss package for configuration
component.css file:
/* components base folder path */
@import "../components/Helper/00-Helper.css";
@import "../components/Layouts/00-Layouts.css";

/* Pages component path */
@import "../components/PagesComponent/Auth/00-Auth.css";
@import "../components/PagesComponent/Home/00-Home.css";

1 Reply

Scottish DeerhoundOP
global.css file:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "./components.css";
@import "tailwindcss/utilities";


postcss.config.js file for configuring css component
module.exports = {
  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}),
  },
};


Issues:
1. Whenever I add any of the font name to one of the component css, all the font in my app change to time new roman and there is a small padding on the whole app.
eg: 00-Layouts.css file
@tailwind base;
@tailwind components;
@tailwind utilities;

.navbar_footer_layout_bg {
  @apply font-manrope ...;
}


2. When I added the font to global.css file, it didnot have any effect, likewise adding it to the html directly.