ポートフォリオサイトのロゴ
Icon for NotoSansJP使ってるのにSafariのフォントが明朝体になる
Tailwind CSS
Next.js

NotoSansJP使ってるのにSafariのフォントが明朝体になる

SafariやiOSのGoogle Chromeだけフォントが明朝体に変わってしまっている件。

目次

iOSのSafariだけFontが崩れる

font-familyに何も指定しなかった場合は、OS・ブラウザごとのデフォルトフォントが適用されます。 大半のブラウザのデフォルトフォントは、ゴシック体ですが、macOSとiOS（iPhone、iPad）の標準ブラウザSafariだけはデフォルトフォントが明朝体になっています。

qiita.com

シンプルにfont-familyを指定したい - Qiita

バンドルされた標準的な日本語フォントをただただ使いたいだけなのに、ちまたにあふれる指定は煩雑！できるだけシンプルにfont-familyを指定したい！デモまず調査※ ブラウザの初期設定の場合…

layout.tsxに複数指定しているけど、何故か崩れてしまう

layout.tsx
// src\app\layout.tsx
import '@/styles/globals.css';
import '@/styles/mdx.css';
 
import type { Metadata } from 'next';
import type React from 'react';
 
import { siteConfig } from '@/config/site';
 
import { fontNotoSansJp, fontPlemolJP35Console } from '@/assets/fonts';
import Footer from '@/components/Footer';
import { ThemeProvider } from '@/components/ui/theme-provider';
import { cn } from '@/lib/utils';
import Header from '../components/Header';
 
export const metadata: Metadata = {
  metadataBase: new URL(siteConfig.url),
  title: {
    default: siteConfig.name,
    template: `%s | ${siteConfig.name}`,
  },
  description: siteConfig.description,
  openGraph: {
    title: siteConfig.name,
    description: siteConfig.description,
    images: [siteConfig.ogImage],
  },
  twitter: {
    title: siteConfig.name,
    description: siteConfig.description,
    card: 'summary_large_image',
  },
};
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='ja' suppressHydrationWarning>
      <body className={`${fontNotoSansJp.variable} ${fontPlemolJP35Console.variable}`}>
        <ThemeProvider
          attribute='class'
          defaultTheme='system'
          enableSystem
          disableTransitionOnChange
        >
          <Header />
          <main className='mx-auto w-[calc(100%-32px)] max-w-[1024px] py-4 md:w-[calc(100%-100px)] md:py-8'>
            {children}
          </main>
          <Footer />
        </ThemeProvider>
      </body>
    </html>
  );
}
index.ts
// src\assets\fonts\index.ts
import { Noto_Sans_JP } from 'next/font/google';
import localFont from 'next/font/local';
 
export const fontNotoSansJp = Noto_Sans_JP({
  subsets: ['latin'],
  weight: ['400', '700'],
  display: 'swap',
  preload: false,
  variable: '--font-noto-sans-jp',
});
 
export const fontPlemolJP35Console = localFont({
  src: './PlemolJP35Console-Regular.ttf',
  variable: '--font-plemol-jp-35-console',
});

公式ドキュメントを見直してみる

layout.tsxでフォントを指定する箇所がbodyではなくhtmlタグに設定する必要があった

nextjs.org

Optimizing: Fonts | Next.js

Optimize your application&#x27;s web fonts with the built-in `next/font` loaders.
layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html
      lang='ja'
      suppressHydrationWarning
      className={`${fontNotoSansJp.variable} ${fontPlemolJP35Console.variable}`}
    >
      <body>
        <ThemeProvider
          attribute='class'
          defaultTheme='system'
          enableSystem
          disableTransitionOnChange
        >
          <Header />
          <main className='mx-auto w-[calc(100%-32px)] max-w-[1024px] py-4 md:w-[calc(100%-100px)] md:py-8'>
            {children}
          </main>
          <Footer />
        </ThemeProvider>
      </body>
    </html>
  );
}