Next.js にて Google Fonts、Adobe Fonts、フリーフォントを扱う

最終更新日:

環境

  • Next.js v15
  • React v18
  • TypeScript v5
  • App Router

Google Fonts

Google Fonts を Next.js ですぐ使えるように
パッケージを用意してくれているので導入はけっこう簡単。

子要素以下に適用

import { Meow_Script } from "next/font/google"

const meowScript = Meow_Script({
	weight: "400",
	subsets: ["latin"],
})

export default function Page() {
	return (
		<main className={meowScript.className}>
			Sample
		</main>
	)
}

CSS の font-family で指定したい場合

import styles from "./page.module.scss"
import { Meow_Script } from "next/font/google"

const meowScript = Meow_Script({
	weight: "400",
	subsets: ["latin"],
	variable: "--font-dot-meow-script",
})

export default function Page() {
	return (
		<main className={meowScript.variable}>
			<div className={styles.font}>
				Sample
			</div>
		</main>
	)
}

.font {
	font-family: var(--font-dot-meow-script);
}

Adobe Fonts

  • Adobe Fonts からフォントを選ぶ。
    • Adobe Creative Cloud に加入していると使えるフォントが増える
  • Adobe Fonts から提供される埋め込みコードを使う
    • 日本語対応フォントとそうじゃないフォントで埋め込みコードが違うので注意

使用したいフォントがあったら「Webプロジェクトに追加」を選択し、
新しいプロジェクト名を入力するか、既存のプロジェクトから選択し追加する。
追加した際に、HTML に埋め込むコードと CSS コードが生成されるので、
コピーしておく。

追加したフォントはヘッダー右上の「フォントを管理」→「Webプロジェクト」から確認できる。
使用したいフォントは複数選択できる。

日本語対応フォントの場合

layout.tsx
import { useId } from "react"

export default function RootLayout({
	children,
}: Readonly<{
	children: React.ReactNode
}>) {
	const adobeFontsId = useId()

	return (
		<html lang="ja">
			<Script id={adobeFontsId}>
				{`
					(function(d) {
						var config = {
							kitId: 'xxxxxxx',
							scriptTimeout: 3000,
							async: true
						},
						h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
					})(document);
				`}
			</Script>
			<body>{children}</body>
		</html>
	)
}
page.module.scss
.font {
	font-family: "ab-shonen-oto", sans-serif;
	font-weight: 400;
	font-style: normal;
}
page.tsx
import styles from "./page.module.scss"

export default function Page() {
	return (
		<main className={styles.font}>
			サンプル
		</main>
	)
}

英字フォント

英字フォントの場合、 Adobe Fonts から提供される CSS ファイルを読み込ませる必要がある。
Next.js + App Router では下記のように外部の CSS ファイルを読み込むことはできない。

<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">

リファレンスには記述されてない方法だけど Script を使う。
GitHub 上では定義されているけど、
リファレンスに載ってないものを使うのは少し悩む。

layout.tsx
import { useId } from "react"

export default function RootLayout({
	children,
}: Readonly<{
	children: React.ReactNode
}>) {
	const adobeFontsId = useId()

	return (
		<html lang="ja">
			<Script id={adobeFontsId} stylesheets={["https://use.typekit.net/xxxxxxx.css"]}></Script>
			<body>{children}</body>
		</html>
	)
}
page.module.scss
.font {
	font-family: "alternate-gothic-no-1-d", sans-serif;
	font-weight: 400;
	font-style: normal;
}
page.tsx
import styles from "./page.module.scss"

export default function Page() {
	return (
		<main className={styles.font}>
			Sample
		</main>
	)
}

フリーフォント

page.tsx

import styles from "./page.module.scss"
import localFont from "next/font/local"

const bestTenCrt = localFont({
	src: "./BestTen-CRT.otf",
	variable: "--font-best-ten-crt",
})


export default function Page() {
	return (
		<main className={bestTenCrt.variable}>
			<div className={styles.font}>
				サンプル
			</div>
		</main>
	)
}

page.module.scss

.font {
	font-family: var(--font-best-ten-crt);
}