layout.tsxの設定
app/layout.tsx
import { Noto_Sans_JP } from 'next/font/google';
import './global.css';
export const NotoSansJP = Noto_Sans_JP({
weight: 'variable',
display: 'swap',
subsets: ['latin'],
variable: '--font-noto-sans-jp',
});
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ja" className={NotoSansJP.variable}>
<body>
{children}
</body>
</html>
);
}
ポイント
-
className={NotoSansJP.variable}は公式ドキュメントに書いてあるように、bodyタグではなくhtmlタグにつける。 -
NotoSansJP.classNameにしてもよいが、pandacssでユーティリティcssとして管理したいのであればNotoSansJP.variableにする。 - 複数フォントを使うのであれば、
NotoSansJP.variableにする
Note 🚨: By default, Next.js attaches the className for the fonts to the <body> element, for panda to appropriately load fonts, update the code to attach the className to the <html> element.
classNameとvariableの違い
classNameは直接font-familyを指定する。
variableはcss変数--font-noto-sans-jpに代入するだけ。
もしvariableを使用しながら、全体のフォントファミリーのデフォルト設定をしたい場合は、次の設定が必要
panda.config.tsの設定
panda.config.ts
import { defineConfig } from '@pandacss/dev';
export default defineConfig({
// Whether to use css reset
preflight: true,
// Where to look for your css declarations
include: ['./app/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {
tokens: {
fonts: {
noto: { value: 'var(--font-noto-sans-jp), sans-serif' },
},
},
},
},
// The output directory for your css system
outdir: 'styled-system',
globalCss: {
':root': {
'--global-font-body': 'var(--font-noto-sans-jp)',
},
},
});
tokenで設定すれば、fontFamilyに指定できるようになる。
<p
className={css({
color: 'primary',
fontFamily: 'noto'
})}
>
Hello World
</p>
--global-font-body変数に'var(--font-noto-sans-jp)'を設定することで、デフォルトでNotoSansJPを使用してくれるようになる。
株式会社TRAPE(トラピ)のテックブログです。株式会社TRAPEは、高齢者福祉で人材開発に取り組む企業で、「trapezoid」から名前が来ています。高齢者のwell-being実現のため、「NoRole NoLife」をミッションに、ケアワーカー育成や介護施設の生産性向上に努め、国や自治体事業にも関与しています。
Discussion