Next.js Discord

Discord Forum

Tailwind issue

Unanswered
Masai Lion posted this in #help-forum
Open in Discord
Masai LionOP
im properly importing google fonts in global css and yet they have no affect on visuals, need help

10 Replies

@Masai Lion im properly importing google fonts in global css and yet they have no affect on visuals, need help
B33fb0n3
please share your layout.tsx (or page.tsx if you dont have any layout)
Masai LionOP
hello
import Image from "next/image";
import Hero from "./Components/Hero";

export default function Home() {
return (
<div>
<Hero />
</div>
);
}
heres the page
discord wont let me share larger file
@Masai Lion heres the page
B33fb0n3
You don't import any google fonts yet. Thats why they wont be visible. You can import one by doing the following:
import { Geist } from 'next/font/google'
 
const geist = Geist({
  subsets: ['latin'],
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={geist.className}>
      <body>{children}</body>
    </html>
  )
}

"Geist" in this case is the google font and you place the font in the className. It don't need to be on the html, but I guess you want to have everywhere the same font

More info: https://nextjs.org/docs/app/getting-started/fonts#google-fonts
Masai LionOP
where does this go? in laout or global?
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

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

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

export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};

export default function RootLayout({ children }) {
return (
<html lang="en">
<body
className={${geistSans.variable} ${geistMono.variable} antialiased}
>
{children}
</body>
</html>
);
}
here's my layout
@Masai Lion where does this go? in laout or global?
B33fb0n3
normally it goes into the layout. As you using the variables, you need to assign the variables in your global.css to all your texts. For example like this:
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--my-headline-font-variable);
}