Next.js: Google Fontsがlayout.tsxには適用されるが、page.tsxには適用されない / Tailwind CSS

実現したいこと

page.tsxの特定のdivタグをlilita-oneというフォントで表示させたい。

lilita-one
https://fonts.google.com/specimen/Lilita+One

前提

next.js 15
Tailwind.css
TypeScript

の環境でwebサイトを作っています。

発生している問題

next/font/google を使ってフォントを設定し、layout.tsx の <body> タグに適用しました。layout.tsx 内の <h1> 要素にはフォントが正しく適用されています。
ですが、page.tsx 内の <div> 要素の font-family に同じ CSS クラスを使用すると、開発者ツールでは CSS プロパティ font-family: var(--font-lilita-one); が適用されているにもかかわらず、フォントが表示されません。

該当のソースコード

fonts.ts

ts
1import { Geist, Geist_Mono, Lilita_One } from "next/font/google";
2const geistSans = Geist({
3    variable: "--font-geist-sans",
4    subsets: ["latin"],
5});
6
7const geistMono = Geist_Mono({
8    variable: "--font-geist-mono",
9    subsets: ["latin"],
10});
11
12const lilitaOne = Lilita_One({
13    weight: "400",
14    subsets: ["latin"],
15    variable: "--font-lilita-one",
16});
17
18export {geistSans, geistMono, lilitaOne}

layout.tsx

tsx
1import type { Metadata } from "next";
2import { geistSans,  geistMono, lilitaOne} from './fonts';
3import "./globals.css";
4import Link from 'next/link';
5
6
7
8export const metadata: Metadata = {
9  title: "Create Next App",
10  description: "Generated by create next app",
11};
12
13export default function RootLayout({
14  children,
15}: Readonly<{
16  children: React.ReactNode;
17}>) {
18  return (
19    <html lang="jp">
20      <body
21        className={`${geistSans.variable} ${geistMono.variable} ${lilitaOne.variable} antialiased`}
22      >
23        <header>
24          <h1 className="title"><Link href="/" translate="no" >quiz</Link></h1>
25          <nav className="header-nav">
26            <ul>
27              <li><Link href="/">Home</Link></li>
28              <li><Link href="services">Service</Link></li>
29              <li><Link href="contact">About</Link></li>
30            </ul>
31          </nav>
32        </header>
33        {children}
34      </body>
35    </html>
36  );
37}

globals.css

css
1@import "tailwindcss";
2
3:root {
4  --background: #ffffff;
5  --foreground: #171717;
6}
7
8@theme inline {
9  --color-background: var(--background);
10  --color-foreground: var(--foreground);
11  --font-sans: var(--font-geist-sans);
12  --font-mono: var(--font-geist-mono);
13}
14
15@media (prefers-color-scheme: dark) {
16  :root {
17    --background: #0a0a0a;
18    --foreground: #ededed;
19  }
20}
21
22body {
23  background: var(--background);
24  color: var(--foreground);
25  font-family: Arial, Helvetica, sans-serif;
26}
27
28header {
29  display: flex;
30  justify-content: space-between;
31  align-items: center;
32  margin: 20px 0 40px 40px;
33}
34
35.title {
36  font-family: var(--font-lilita-one);
37  font-size: 27px;
38  width: fit-content;
39}
40.header-nav {
41  flex-grow: 1;
42}
43
44.header-nav ul {
45  font-family: var(--font-geist-mono);
46  display: flex;
47  justify-content: right;
48  margin-right: 40px;
49  gap: 20px;
50}

page.tsx(問題箇所)

tsx
1import Image from "next/image";
2
3export default function Home() {
4  return (
5    <div className="title">SiteTitle</div>
6  );
7}

試したこと

キャッシュのクリアとサーバーの再起動
ブラウザの開発者ツールを使用して、.titleクラスが以下のCSSを正しく表示していることを確認しました。

css
1.title {
2    font-family: var(--font-lilita-one);
3    width: fit-content;
4    font-size: 27px;
5}

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Next.js: Google Fontsがlayout.tsxには適用されるが、page.tsxには適用されない / Tailwind CSS

実現したいこと

前提

発生している問題

該当のソースコード

試したこと

関連した質問