next/font fonts won't load

Just setup a t3 project but the fonts don't seem to be loading. app.tsx:
import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import { type AppType } from "next/app";
import { api } from "~/utils/api";
import "~/styles/globals.css";
import { appWithTranslation } from "next-i18next";

import nextI18nConfig from "../../next-i18next.config.mjs";

import { Red_Hat_Display, DM_Sans } from "next/font/google";

const rhd = Red_Hat_Display({
subsets: ["latin"],
variable: "--font-rhd",
display: "swap"
});

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


const MyApp: AppType<{ session: Session | null }> = ({
Component,
pageProps: { session, ...pageProps },
}) => {
return (
<SessionProvider session={session}>
<main className={`${rhd.variable} ${dm_sans.variable} font-main`}>
<Component {...pageProps} />
</main>
</SessionProvider>
);
};


const I18nApp = appWithTranslation(MyApp, nextI18nConfig);
export default api.withTRPC(I18nApp);
import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import { type AppType } from "next/app";
import { api } from "~/utils/api";
import "~/styles/globals.css";
import { appWithTranslation } from "next-i18next";

import nextI18nConfig from "../../next-i18next.config.mjs";

import { Red_Hat_Display, DM_Sans } from "next/font/google";

const rhd = Red_Hat_Display({
subsets: ["latin"],
variable: "--font-rhd",
display: "swap"
});

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


const MyApp: AppType<{ session: Session | null }> = ({
Component,
pageProps: { session, ...pageProps },
}) => {
return (
<SessionProvider session={session}>
<main className={`${rhd.variable} ${dm_sans.variable} font-main`}>
<Component {...pageProps} />
</main>
</SessionProvider>
);
};


const I18nApp = appWithTranslation(MyApp, nextI18nConfig);
export default api.withTRPC(I18nApp);
tailwind.config.ts
import fontFamily from "tailwindcss/defaultTheme"
import { type Config } from "tailwindcss";

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/@openkind/components/**/*.js",
],
theme: {
extend: {
colors: {
darkBg: "#292a2d",
},
fontFamily: {
main: ["var(--font-dm_sans)", fontFamily.sans],
heading: ["var(--font-rhd)", fontFamily.sans],
},
},
},
presets: [require("@openkind/components/tailwind.config")],
} satisfies Config;
import fontFamily from "tailwindcss/defaultTheme"
import { type Config } from "tailwindcss";

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/@openkind/components/**/*.js",
],
theme: {
extend: {
colors: {
darkBg: "#292a2d",
},
fontFamily: {
main: ["var(--font-dm_sans)", fontFamily.sans],
heading: ["var(--font-rhd)", fontFamily.sans],
},
},
},
presets: [require("@openkind/components/tailwind.config")],
} satisfies Config;
Solution:
fontFamily import was supposed to be a named import
Jump to solution
4 Replies
shiv
shiv2y ago
the font seems to load
shiv
shiv2y ago
but isn't displayed
Solution
shiv
shiv2y ago
fontFamily import was supposed to be a named import
Prabhath
Prabhath13mo ago
Can you give more detailed explanation, I am also facing the same issue, can't understand the solution here
Want results from more Discord servers?
Add your server