Next.js + Tailwind CSS 自定义字体不生效问题求助

大家好，我在Next.js项目里搭配Tailwind CSS配置自定义字体时遇到了麻烦——字体完全不生效，页面始终渲染默认字体。我之前在其他项目里用一模一样的方式配置是可以正常工作的，但这次的测试项目就是不行，麻烦帮我排查一下问题！

我的代码配置如下： #

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
font-family: 'JetBrainsMono';
src: url(/assets/fonts/JetBrainsMono.ttf);
}

@font-face {
font-family: 'Iosevka';
src: url(/assets/fonts/Iosevka.ttf);
}

tailwindcss.config.js

module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

index.tsx

import { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'

const Home: NextPage = () => {
return (
<>
<Head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<div>
<h1 className='Iosevka'>
Iosevka
</h1>
<h1 className='JetBrainsMono'>
Iosevka
</h1>
</div>
</main>
</>
)
}

export default Home

我实在搞不懂为什么这次不行，之前的项目用同样的步骤配置自定义字体都能正常显示，有没有大佬能帮我看看哪里出错了？

备注：内容来源于stack exchange，提问作者Sniper Monkey