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;