カテゴリ：Tech投稿日：2023/5/27

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 テーマ内でfontFamilyにinheritを指定して、完了です。
全ての Mantine コンポーネントでfontFamilyが設定されているのを確認できるでしょう。

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

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

参考

ブログ運営者

muuuuminn

経歴:

SE:1年半 → FE:5年 → ?

スキル:

Next.js, TypeScript, React, Notion

趣味:

ゲーム, 手品, 開発, コレクション, 映画

GitHub

ブログ

経歴