Need help using google font

Unanswered

Large-billed Tern posted this in #help-forum

Large-billed TernOP

2025-10-02T16:58:36.780Z

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: [],
}

39 Replies

Yi Lon Ma

2025-10-02T17:03:16.593Z

add font-pixelify or font-chicle etc where you need those fonts

Large-billed TernOP

2025-10-02T17:05:08.614Z

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

2025-10-02T17:05:33.487Z

Yi Lon Ma

2025-10-02T17:06:21.299Z

this is weird

how about doing !font-chicle

@Yi Lon Ma how about doing `!font-chicle`

Large-billed TernOP

2025-10-02T17:08:12.863Z

doesnt change

Yi Lon Ma

2025-10-02T17:08:33.243Z

what does the style pane show under inspect tab

Large-billed TernOP

2025-10-02T17:08:46.642Z

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

2025-10-02T17:10:01.755Z

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 can you remove this .className and add your own font-pixelify class

Large-billed TernOP

2025-10-02T17:11:05.893Z

How ?

Yi Lon Ma

2025-10-02T17:11:32.814Z

like remove the whole pixelify.className part and replace it with font-pixelify

Large-billed TernOP

2025-10-02T17:13:50.530Z

I dont have any font at all doing this

@Large-billed Tern I dont have any font at all doing this

Greater Shearwater

2025-10-02T17:35:18.607Z

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.

@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.

Large-billed TernOP

2025-10-02T17:43:56.572Z

Yes i did it but it doesn't work

Look like .variable dont work at all

@Large-billed Tern Look like .variable dont work at all

alfonsüs ardani

2025-10-14T07:16:53.368Z

it should work

can you send the latest code?

@alfonsüs ardani can you send the latest code?

Large-billed TernOP

2025-10-14T22:00:01.642Z

import type { Metadata } from "next";
import "./globals.css";
import {geistSans, geistMono, pixelify, chicle} from "@/app/components/ui/font/font";

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} antialiased`}>
        {children}
      </body>
    </html>
  );
}`

thanks but it doesnt work

@Large-billed Tern import type { Metadata } from "next"; import "./globals.css"; import {geistSans, geistMono, pixelify, chicle} from "@/app/components/ui/font/font"; 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} antialiased`}> {children} </body> </html> ); }`

alfonsüs ardani

2025-10-14T22:02:27.578Z

it works allright

@alfonsüs ardani it works allright

Large-billed TernOP

2025-10-14T22:03:10.415Z

Yes but i want an other text with the chicle font

@Large-billed Tern Yes but i want an other text with the chicle font

alfonsüs ardani

2025-10-14T22:05:14.722Z