Reactプロジェクトへのフォント追加方法
2024-09-12
React.js プロジェクトにフォントを追加する方法
CSSファイルでのフォント追加
フォントファイルのダウンロード
- 通常、ダウンロードされたフォントファイルは
.ttf,.woff,.woff2などの形式になります。 - Google FontsやFont Squirrelなどのサイトから必要なフォントをダウンロードします。
フォントファイルをプロジェクトに追加
- ダウンロードしたフォントファイルをプロジェクトの
publicディレクトリに配置します。
CSSファイルでフォントを指定
src/App.cssなどのCSSファイルに、以下のコードを追加します。
@font-face {
font-family: 'YourFontName';
src: url('./fonts/YourFontName.ttf') format('truetype'),
url('./fonts/YourFontName.woff') format('woff'),
url('./fonts/YourFontName.woff2') format('woff2');
}
/* 使用例 */
h1 {
font-family: 'YourFontName', sans-serif;
}
font-familyプロパティを使用して、CSSでフォントを使用します。@font-faceルールを使用して、フォント名を定義し、フォントファイルのパスを指定します。
Reactコンポーネントでのフォント追加
CSSモジュールを使用
- CSSモジュールを使用すると、フォント名をグローバルに汚染することなく、コンポーネント内でフォントを定義できます。
import styles from './App.module.css';
function App() {
return (
<div className={styles.app}>
<h1>Hello, world!</h1>
</div>
);
}
App.module.cssファイルに、フォントを定義します。
.app h1 {
font-family: 'YourFontName', sans-serif;
}
スタイルドコンポーネントを使用
- スタイルドコンポーネントを使用すると、JSX内で直接スタイルを定義できます。
import styled from 'styled-components';
const StyledH1 = styled.h1`
font-family: 'YourFontName', sans-serif;
`;
function App() {
return (
<div>
<StyledH1>Hello, world!</StyledH1>
</div>
);
}
注意
- フォントのライセンスに注意し、適切に使用してください。
- 複数のフォント形式を指定することで、ブラウザの互換性を確保できます。
- フォントファイルのパスは、プロジェクトのルートディレクトリを基準として指定してください。
React.js プロジェクトへのフォント追加のコード例解説
@font-face {
font-family: 'YourFontName';
src: url('./fonts/YourFontName.ttf') format('truetype'),
url('./fonts/YourFontName.woff') format('woff'),
url('./fonts/YourFontName.woff2') format('woff2');
}
/* 使用例 */
h1 {
font-family: 'YourFontName', sans-serif;
}
- font-family プロパティ
- 要素に適用するフォントを指定します。
- 複数のフォント名をカンマで区切って指定し、フォントが見つからない場合の代替フォントを指定できます。
- @font-face ルール
- ブラウザに新しいフォントを定義する際に使用します。
font-family: フォントの名前を指定します。この名前を使ってCSSでフォントを呼び出します。src: フォントファイルのパスとフォーマットを指定します。複数のフォーマットを指定することで、様々なブラウザに対応できます。
1 CSSモジュール
import styles from './App.module.css';
function App() {
return (
<div className={styles.app}>
<h1>Hello, world!</h1>
</div>
);
}
/* App.module.css */
.app h1 {
font-family: 'YourFontName', sans-serif;
}
className={styles.app}のように、CSSモジュールで定義したクラス名をJSXに渡します。- CSSモジュールは、各コンポーネントに固有のCSSクラス名を生成し、CSSの命名衝突を防ぎます。
import styled from 'styled-components';
const StyledH1 = styled.h1`
font-family: 'YourFontName', sans-serif;
`;
function App() {
return (
<div>
<StyledH1>Hello, world!</StyledH1>
</div>
);
}
styled.h1のように、スタイルを適用したい要素を指定し、バッククォート内でCSSを記述します。- スタイルドコンポーネントは、JSX内で直接スタイルを定義できるライブラリです。
- CSSモジュール
- font-family プロパティ
- @font-face ルール
- フォントファイルの配置
- フォントの最適化
- フォントライセンス
- フォントフォーマット
より詳しく知りたい場合は、以下のキーワードで検索してみてください。
- CSSモジュール
- CSS @font-face
- React.js フォント追加
グローバルスタイルシートの利用
- デメリット
- グローバルなスタイルが意図しない影響を与える可能性があります。
- 特定のコンポーネントでのみスタイルをカスタマイズしたい場合に、柔軟性に欠けることがあります。
- メリット
- プロジェクト全体で一貫したスタイルを定義できます。
- 複数のコンポーネントで同じスタイルを再利用できます。
// src/index.css
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
body {
font-family: 'Roboto', sans-seri f;
}
index.cssファイルに、Google Fontsなどの外部のフォントをインポートし、bodyタグに適用します。
フォントアイコンライブラリの利用
-
デメリット
-
- 豊富なアイコンが用意されており、簡単に利用できます。
- アイコンフォントは、通常のテキストフォントと同様に扱えるため、CSSでスタイリングが可能です。
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
function App() {
re turn (
<FontAwesomeIcon icon={faCoffee} size="2x" />
);
}
サーバーサイドレンダリング (SSR) でのフォントの埋め込み
-
Next.js の例
-
- サーバーサイドの処理が増加します。
-
- 初期表示速度が高速化されます。
- SEOに有利です。
動的なフォント読み込み
カスタムフォントのビルド
- デメリット
- メリット
選択するべき方法
- デザインの自由度
カスタムフォントを作成することで、オリジナリティの高いデザインを実現できます。 - パフォーマンス
初期表示速度が重要な場合は、動的なフォント読み込みやSSRが有効です。 - フォントの利用頻度
全ページで同じフォントを使用する場合は、グローバルスタイルシートが適しています。 - プロジェクトの規模や複雑さ
小規模なプロジェクトであれば、CSSモジュールやスタイルドコンポーネントで十分な場合が多いです。
css reactjs fonts
