mellow anvil
I'm using @next/font/google in _app.tsx and for whatever reason, sometimes it only uses the fallback font. Isn't the point of preloading a font to prevent the need for a fallback?
Here's my setup:
const jakartaSans = Plus_Jakarta_Sans({
subsets: ['latin'],
preload: true,
});
const MyApp = ({
Component,
pageProps,
}: AppProps<{
initialSession: Session;
}>) => {
// using useAuth here is important as it will check if we need to set a new password
const router = useRouter();
const [supabaseClient] = useState(() => createBrowserSupabaseClient());
useEffect(() => {
const {
data: { subscription: listener },
} = supabaseClient.auth.onAuthStateChange(async (event) => {
if (event == 'PASSWORD_RECOVERY') {
router.push(`/login?step=${ACPage.PasswordReset}`);
}
});
return () => {
listener?.unsubscribe();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
//TODO rm any
const getLayout = (Component as any).getLayout;
return (
<>
<style jsx global>{`
html {
font-family: ${jakartaSans.style.fontFamily};
}
`}</style>
<Head>
<title>Moonlight</title>
<link rel="icon" href="/favicon.svg" />
<meta charSet="UTF-8" />
</Head>
<SessionContextProvider
supabaseClient={supabaseClient}
initialSession={pageProps.initialSession}
>
<div className={`text-moonlight-navy`}>
{getLayout ? (
getLayout(<Component {...pageProps} />)
) : (
<DefaultLayout pageProps={pageProps}>
<Component {...pageProps} />
</DefaultLayout>
)}
</div>
</SessionContextProvider>
</>
);
};
export default withTRPC({
config() {
return {
url: '/api/trpc',
transformer,
};
},
ssr: false,
})(MyApp);
iron schooner
