Zenn
🔤

Fontsourceを使ってReactでfont導入してみた 🎉

2025/02/27に公開
React
Google Fonts
mui
typography
fontsource
tech

はじめに 🌟

web開発において、フォントの選択と実装は見た目だけでなくユーザー体験に大きく影響します ✨。従来のウェブフォント実装では、Google Fonts 🔤 や Adobe Fonts などの外部CDNを利用するか、フォントファイルを直接プロジェクトに組み込む方法が一般的でした 📁。

🔤Fontsourceは、これらの課題を解決するライブラリです。本記事では、ReactアプリケーションでFontsourceを導入する際のメリット・デメリットを詳しく解説し、Material-UI（MUI）と組み合わせる実装例も紹介します 🚀。

Fontsourceとは 🔍

🔤Fontsourceは、OSSのウェブフォントライブラリで、NPMパッケージとして提供されています 📦。Google Fonts、Open Font License などのオープンソースフォントを、NPMモジュールとして使用できるようにしたものです 💻。現在、1,000種類以上のフォントファミリーをサポートしています 🎯。

Fontsourceの導入メリット

1. パフォーマンスの向上

Fontsourceを使用すると、外部サーバーへのHTTPリクエストが不要になり、初期ロード時間が短縮されます。また、ビルドプロセスの一部としてフォントをバンドルできるため、ページロード時のレイアウトシフトを防ぎます。

2. オフライン対応とセルフホスティング

外部CDNに依存せず、アプリケーション自体にフォントをバンドルするため、ネットワーク接続なしでもフォントを表示できます。これにより、PWA（Progressive Web App）やオフライン対応が必要なアプリケーションに最適です。

3. 依存関係の明示化

// package.jsonの例
{
  "dependencies": {
    "@fontsource/roboto": "^4.5.8",
    "@fontsource/noto-sans-jp": "^4.5.12"
  }
}

フォントをnpmパッケージとして管理することで、プロジェクトの依存関係が明確になります。バージョン管理も容易で、他の依存パッケージと同様に扱えます。

4. 必要なサブセットのみをロード

// ラテン文字のみをインポート
import "@fontsource/roboto/latin-400.css";

// 日本語サブセットをインポート
import "@fontsource/noto-sans-jp/japanese-400.css";

必要なウェイト、スタイル、サブセットのみをインポートできるため、不要なフォントデータのロードを避けられます。特に多言語対応が必要なアプリケーションでは、パフォーマンス向上につながります。

MUIとFontsourceの組み合わせ方

Material-UI（MUI）のTypographyコンポーネントとFontsourceを組み合わせる実装例を紹介します。

Step 1: 必要なパッケージのインストール

# Fontsourceのインストール
npm install @fontsource/roboto @fontsource/noto-sans-jp

Step 2: フォントのインポート（index.css）

/* src/index.css */

/* Robotoフォント（英語） */
@import '@fontsource/roboto/300.css';
@import '@fontsource/roboto/400.css';
@import '@fontsource/roboto/500.css';
@import '@fontsource/roboto/700.css';

/* Noto Sans JP（日本語） */
@import '@fontsource/noto-sans-jp/300.css';
@import '@fontsource/noto-sans-jp/400.css';
@import '@fontsource/noto-sans-jp/500.css';
@import '@fontsource/noto-sans-jp/700.css';

/* その他のスタイル */
body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
}

Step 3: MUIテーマの設定

// src/theme.js
import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  typography: {
    fontFamily: [
      'Roboto',
      'Noto Sans JP',
      'sans-serif',
    ].join(','),
    h1: {
      fontWeight: 500,
    },
    body1: {
      fontWeight: 400,
    },
    // その他のバリエーション
  },
});

export default theme;

まとめ 🎯

✨ 高パフォーマンスが求められるSPAなどでは、外部リクエストを減らし初期ロード時間を短縮できるため特に使用をお勧めします。オフラインでも使えるPWAとかもいいかもです！🚀

🔤Fontsourceは、ReactアプリケーションにおけるWebフォント実装の新しいアプローチを提供します。NPMパッケージとしてフォントを管理することで、パフォーマンス✅、オフライン対応📱、依存関係の明確化📋などのメリットがあります。

⚠️ 一方で、バンドルサイズの増加📦や設定の手間⚙️などのデメリットも存在します。プロジェクトの要件に応じて、従来のCDNアプローチとFontsourceアプローチを適切に選択することが重要です💡

🎨 MUIと組み合わせることで、一貫性のあるタイポグラフィシステムを容易に構築でき、モダンなReactアプリケーション開発に大きく貢献します✨。

参考リソース

fontsource repo
MUI docs
web font best practice

Discussion