# NotoSansJP使ってるのにSafariのフォントが明朝体になる
## iOSのSafariだけFontが崩れる
font-family に何も指定しなかった場合は、OS・ブラウザごとのデフォルトフォントが適用されます。
大半のブラウザのデフォルトフォントは、ゴシック体ですが、macOS と iOS(iPhone、iPad)の標準ブラウザ Safari だけはデフォルトフォントが明朝体になっています。
https://qiita.com/ksk1015/items/9d2028454ee144c64c60
## layout.tsxに複数指定しているけど、何故か崩れてしまう
```typescript title="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 (
{children}
);
}
```
```typescript title="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 タグに設定する必要があった。
https://nextjs.org/docs/app/building-your-application/optimizing/fonts#with-tailwind-css
```typescript title="layout.tsx"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```