Custom font in twind

Question

I'm trying to import a custom font in twind. I've read both the twind and tailwind docs on adding custom fonts and just cannot get it to work.

I've tried using @import and @font-face and neither work for me.

twind.ts

import { Configuration, setup } from "twind";
export * from "twind";
export const config: Configuration = {
  darkMode: "class",
  mode: "silent",
  theme: {
    extend: {
      fontFamily: {
        custom1: ['Roboto','sans-serif'],
        custom2: 'Organo',
        custom3: 'Varela'
      },
      spacing: {
        128: '32rem',
        144: '36rem',
      },
    },
  },
  preflight: {
    '@import': `url('https://fonts.googleapis.com/css2?amily=Roboto:ital,wght@0,400;0,700;1,400&display=swap')`,
    // Declare font face
    '@font-face': [
      {
        fontFamily: 'Organo',
        fontWeight: '400',
        src: 'url(/static/fonts/Organo.woff)',
      },
      {
        fontFamily: 'Varela',
        fontWeight: '400',
        src: 'url(/static/fonts/VarelaRound-Regular.ttf) format("ttf")',
      }
    ],
  },
};
if (IS_BROWSER) setup(config);

index.tsx

/** @jsx h */
/** @jsxFrag Fragment */
import { Fragment, h } from "preact";
import { tw } from "@twind";

export default function Home() {
  return (
    <>
      <div class={tw`flex flex-col min-h-screen`}>
        <p class={tw`my-6 text(4xl sm:4xl md:4xl) font-custom1`}>
          hello, world
        </p>
      </div>
    </>
  );
}