Next.jsでGoogleFontsを適用した手順

Last updated at 2026-02-01Posted at 2026-02-01

Googlefontsで使いたいフォントを決める
Get font ボタンを押す
<>Get Embed Codeを押す

手順

`layout.tsx'にimportを追加する

import { DotGothic16 } from "next/font/google";

定義を追加する

export const dotgothic = DotGothic16({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-dotgothic",
});

定義したフォントを body の className に追加

デフォルトのテンプレートから作成だと、二つ記述があるのでそこに追加する形に今回はしました。
before

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}

after

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} ${dotgothic.variable} antialiased`}      
      >
        {children}
      </body>
    </html>
  );
}

CSSにクラスを定義する

.dotgothic {
  font-family: var(--font-dotgothic), system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans JP", sans-serif;
  font-weight: 400;
}

使い方

<span className="dotgothic">ほげほげ</span>

DotGothic16はこんな感じ

以上です。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up