next/font fonts won't load
Just setup a t3 project but the fonts don't seem to be loading.
app.tsx:
tailwind.config.ts
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);
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;
4 Replies