next/fontでemotionを使って全体に適用するフォントを設定する

next.js 13.3からnext/fontのインストールが必要なくなりました。
こいつをemotionで設定をする部分でちょっとハマったので備忘録も兼ねての記事です。

next/fontとは

next/fontの新しいフォントシステムは、自動自己ホスティングとGoogle Fontsの便利な利用を提供します。最適なウェブフォント読み込みとレイアウトシフトゼロを実現し、パフォーマンスとプライバシーに優れています。これにより、ブラウザからGoogleへのリクエストもなく、効率的なフォント管理が可能です。

emotionのGlobalコンポーネントと組み合わせて使う方法

next/fontをemotionと一緒に使いたいのですが、少し難航しました。
所々省略してますが、以下のスニペットでうまくいきました

src/styles/global.ts

import { Zen_Kaku_Gothic_Antique } from "@next/font/google";

const Zen_Kaku_Gothic_Antique_Normal = Zen_Kaku_Gothic_Antique({
  weight: '400',
  subsets: ['latin'],
})

export const style = {
  body: Zen_Kaku_Gothic_Antique_Normal.style,
}

app.tsx

import type { AppProps } from 'next/app'
import { Global } from '@emotion/react'
import { style } from 'src/styles/global'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Global styles={style} />
      <Component {...pageProps} />
    </>
  )
}

備考

Globalタグに入れるスタイルはオブジェクトスタイルと違ってセレクタも指定する必要があります。ここで勘違いしてハマってましたw