Next.js Discord

Discord Forum

Need help using google font

Unanswered
Large-billed Tern posted this in #help-forum
Open in Discord
Large-billed TernOP
I try to use multiple google font for my react next.js project using tailwind, but i don't know how to import them well, here is my imports can you help me with my problem ? : 
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { Pixelify_Sans, Chicle} from 'next/font/google'

const chicle = Chicle({
  weight: "400",
  subsets: ["latin"],
  display: "swap",
  variable: "--font-chicle",
});

const pixelify = Pixelify_Sans({
    subsets: ['latin'],
    variable: '--font-pixelify',
});

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

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={`${geistSans.variable} ${geistMono.variable} ${chicle.variable} ${pixelify.className}`}
      >
        {children}
      </body>
    </html>
  );
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"
    ,"./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily : {
        pixelify: ["var(--font-pixelify)", "sans-serif"],
        geist: ['var(--font-geist-sans)', 'sans-serif'],
        geistMono: ['var(--font-geist-mono)', 'monospace'],
        chicle: ["var(--font-chicle)", "sans-serif"],
      },
      colors : {
        "buttonColor" : "rgb(172, 172, 172)",
        "black" : "black",
        "white" : "white"
      }
    },
  },
  plugins: [],
}

21 Replies

Yi Lon Ma
add font-pixelify or font-chicle etc where you need those fonts
Large-billed TernOP
Yes i did it to my text but still showing up pixelify font,
@Yi Lon Ma add `font-pixelify` or `font-chicle` etc where you need those fonts
Large-billed TernOP
Yi Lon Ma
this is weird
how about doing !font-chicle
@Yi Lon Ma how about doing `!font-chicle`
Large-billed TernOP
doesnt change
Yi Lon Ma
what does the style pane show under inspect tab
Large-billed TernOP
i have my mouse on
with ctrl shift c
className={`${geistSans.variable} ${geistMono.variable} ${chicle.variable} ${pixelify.className}`}
i guess this line is in cause
i asked chat gpt and he said that .classname was like the default font for the body
and so i cant change the font
Yi Lon Ma
can you remove this .className and add your own font-pixelify class
althought both of em ideally does same thing but who knows
Yi Lon Ma
like remove the whole pixelify.className part and replace it with font-pixelify
Large-billed TernOP
I dont have any font at all doing this
@Large-billed Tern I dont have any font at all doing this
Greater Shearwater
Have you tried using pixelify.variable instead of pixelify.className?

If you want to give a default font family for the body you can then later use font-pixelify class on it.
Look like .variable dont work at all