Next.js Discord

Discord Forum

Multiple font imports, override depending on the order

Unanswered
Yacare Caiman posted this in #help-forum
Open in Discord
Yacare CaimanOP
So I'm using tailwind and I have three font, one is inter from google fonts and other two are locals, I was trying to set as default font inter and as h1 (or any other header) another font, but doesn't seem working, the last font var declared in the layout override the others, in the example below anotherFont


// layout
const inter = Inter({ subsets: ["latin"] });

const ppFormulaCondensed = localFont({
  src: [
    {
      path: "./fonts/PP Formula Condensed Ultralight 100.otf",
      weight: "100",
      style: "light",
    },
    {
      path: "./fonts/PP Formula Condensed Regular 400.otf",
      weight: "400",
      style: "normal",
    },
    {
      path: "./fonts/PP Formula Condensed Bold 700.otf",
      weight: "700",
      style: "bold",
    },
  ],
  variable: "--pp-formula-condensed",
});

const anotherFont = localFont({
  src: [
    {
      path: "./fonts/anotherfont.ttf",
      weight: "400",
      style: "normal",
    },
  ],
  variable: "--another-font",
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body
        className={`${anotherFont.className} ${ppFormulaCondensed.className} ${inter.className}`}
      >
        {children}
      </body>
    </html>
  );
}


// tailwind config
  fontFamily: {
      "anotherfont": "var(--another-font)",
      "pp-formula": "var(--pp-formula-condensed",
      "inter": "Inter",
    },


// global css
body {
  background-color: #0a104e;
  width: 100vw;
  overflow-x: hidden;
  font-family: "Inter";
}

@layer base {
  html,
  body {
    @apply font-inter;
  }

  h1 {
    @apply font-pp-formula;
  }
}

body {
  background-color: #0a104e;
  width: 100vw;
  overflow-x: hidden;
}

3 Replies

larkx
@Yacare Caiman Hi, did you ever figure this out?
Yacare CaimanOP
I workarounded It Just by importing the don't only where needed instead of the top level, but this is not really a fix, it's actually quite tedious
Hassib
Hi, I believe using the localFont is not recommended as it thrown a warning in the console when I used it in my project.

You can achieve it by declaring the font in the global style file of your project like this:

@font-face {
  font-family: 'Mona Sans';
  font-weight: 200 900;
  font-display: block;
  font-style: normal;
  font-stretch: 75% 125%;
  src: url('some/url') format('woff2');
}


And then apply it to the elements you need.

You can also define that in the tailwind config file like this to use the font's variable anywhere you need on the project:

const defaultTheme = require("tailwindcss/defaultTheme")

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,mdx,ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        jetbrains: ["Jetbrains Mono", ...defaultTheme.fontFamily.sans],
      },
    },
  },
}