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={
${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: [],
};10 Replies
you need to set swap
i dont remember the exact property
i think
something like that yh
i had to play around with it to find out and i found it randomly
@next/font uses display
optional as defaultweird its not mentioned somewhere
which i think is kinda dumb since they do all the calculation to minimize layout shift while swappig in the font
makes no sense why optional is default
@next/font | Next.js
Optimizing loading web fonts with the built-in
@next/font loaders.yh ofc theres docs on that but they didnt think that some people wouldnt know you need display swap
but i also think its browser sided, afaik different browsers behave differently with display optional
yeah its a bad default
thanks guys i really appreciate it