カテゴリ:Tech投稿日:
next/font/googleでDotGothic16を読み込んでMantineのコンポーネントに適用するのサムネイル

next/font/googleでDotGothic16を読み込んでMantineのコンポーネントに適用する

結論

next/font/google で DotGothic16 を読み込んで、
Mantine のテーマ設定で font-family を inherit にすることで
全ての Mantine コンポーネントに DotGothic16 を適用させました。
ただしこれが正解のやり方なのかは、確証を持てていないです。

詳細

まずnext/font/googleからDotGothic16を読み込んで、適用させたい範囲のコンポーネントにclassNameを指定します。
下のコードはBaseLayoutコンポーネント内の children にDotGothic16を適用させたい!という例です。

// 色々省略してます。
import { DotGothic16 } from "next/font/google";

import { SimpleGrid } from "@mantine/core";

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

export const BaseLayout = (props) => {
  return <SimpleGrid className={font.className}>{props.children}</SimpleGrid>;
};

最後に Mantine テーマ内でfontFamilyinheritを指定して、完了です。
全ての Mantine コンポーネントでfontFamilyが設定されているのを確認できるでしょう。

import { MantineProvider } from "@mantine/core";

function Demo() {
  return (
    <MantineProvider
      theme={{
        fontFamily: "inherit",
      }}
    >
      <Button>ボタン</Button>
    </MantineProvider>
  );
}

参考

https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts

https://mantine.dev/theming/typography/#load-custom-fonts

ブログ運営者
muuuuminn
経歴:
SE:1年半 → FE:5年 → ?
スキル:
Next.js, TypeScript, React, Notion
趣味:
ゲーム, 手品, 開発, コレクション, 映画