Issues with next google fonts
According to next docs, I applied config in _app. and tailwind.config.mjs, but this approach works badly, after some refresh app shows the expected font and sometimes the default font is displayed.
import { type AppType } from "next/app";
import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import { Space_Grotesk } from "@next/font/google";
const spaceGrotesk = Space_Grotesk({
variable: "--font-space-grotesk",
subsets: ["latin"],
});
import { trpc } from "../utils/trpc";
import "../styles/globals.css";
import { Layout } from "src/components/layout";
const MyApp: AppType<{ session: Session | null; withoutNavbar: boolean }> = ({
Component,
pageProps: { session, ...pageProps },
}) => {
return (
<SessionProvider session={session}>
<main className={
<Layout withoutNavbar={pageProps.withoutNavbar}>
<Component {...pageProps} />
</Layout>
</main>
</SessionProvider>
);
};
export default trpc.withTRPC(MyApp);
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { fontFamily } = require("tailwindcss/defaultTheme");
/ @type {import('tailwindcss').Config} */
module.exports = {
mode: "jit",
content: ["./src//*.{js,ts,jsx,tsx}"],
theme: {
extend: {
fontFamily: {
sans: ["var(--font-space-grotesk)", ...fontFamily.sans],
},
},
},
plugins: [],
};
import { type AppType } from "next/app";
import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import { Space_Grotesk } from "@next/font/google";
const spaceGrotesk = Space_Grotesk({
variable: "--font-space-grotesk",
subsets: ["latin"],
});
import { trpc } from "../utils/trpc";
import "../styles/globals.css";
import { Layout } from "src/components/layout";
const MyApp: AppType<{ session: Session | null; withoutNavbar: boolean }> = ({
Component,
pageProps: { session, ...pageProps },
}) => {
return (
<SessionProvider session={session}>
<main className={
${spaceGrotesk.variable} min-h-screen font-sans<Layout withoutNavbar={pageProps.withoutNavbar}>
<Component {...pageProps} />
</Layout>
</main>
</SessionProvider>
);
};
export default trpc.withTRPC(MyApp);
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { fontFamily } = require("tailwindcss/defaultTheme");
/ @type {import('tailwindcss').Config} */
module.exports = {
mode: "jit",
content: ["./src//*.{js,ts,jsx,tsx}"],
theme: {
extend: {
fontFamily: {
sans: ["var(--font-space-grotesk)", ...fontFamily.sans],
},
},
},
plugins: [],
};
