カテゴリ:Tech投稿日:
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趣味:
ゲーム, 手品, 開発, コレクション, 映画