the-biergarten-app/pages/_app.tsx

import UserContext from '@/contexts/userContext';
import useUser from '@/hooks/useUser';
import '@/styles/globals.css';
import type { AppProps } from 'next/app';

import { Roboto } from 'next/font/google';

const roboto = Roboto({
  weight: ['100', '300', '400', '500', '700', '900'],
  subsets: ['latin'],
});

export default function App({ Component, pageProps }: AppProps) {
  const { user, isLoading, error } = useUser();

  return (
    <>
      <style jsx global>
        {`
          html {
            font-family: ${roboto.style.fontFamily};
          }
        `}
      </style>
      <UserContext.Provider value={{ user, isLoading, error }}>
        <Component {...pageProps} />
      </UserContext.Provider>
    </>
  );
}