はじめに
時間割アプリの開発にあたって、GoogleFontsのフォントを使用しました。
そこで今回はReactにおけるGoogleFontsの使い方を解説します。
使い方
ReactでGooglFontsを使用する場合2つの方法があります。
・index.htmlで読み込む(一般的)
・JavaScriptファイルで読み込み
使い分け
- index.htmlで読み込む場合
全ページで共通してフォントを使うとき - JavaScriptファイルで読み込む場合
特定のコンポーネントやページでのみフォントを使いたいとき
index.htmlで読み込む方法
1.プロジェクトのpublicフォルダ内にあるindex.htmlを開く
2.<head>タグの中にGoogleFontsのコードをコピペする
JavaScriptファイルで読み込む方法
1.index.jsやApp.jsの中に、<link>タグを動的に挿入するコードを追加する
例：Robotoフォントを特定のコンポーネントでのみフォントを読み込みたい場合
import React from 'react';
const loadGoogleFont = () => {
const link = document.createElement('link');
link.href = 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap';
link.rel = 'stylesheet';
document.head.appendChild(link);
};
function App() {
React.useEffect(() => {
loadGoogleFont();
}, []);
return (
<div>
{/* 他のコンポーネント */}
</div>
);
}
export default App;
スタイルでフォント指定
index.htmlにGoogle Fontsを追加しただけでは、フォントが自動的に適用されないため。CSSでフォントを明示的に指定する必要がある。
以下のようにstyle.cssで指定することもできれば、コンポーネントのstyle内で指定することも可能。
.css
body {
font-family: 'Roboto', sans-serif;
}
.jsx
import React from 'react';
import './style.css';
function App() {
return (
<div style={{ fontFamily: "'Roboto', sans-serif" }}>
{/* 他のコンポーネント */}
<h1>Robotoフォントを使用</h1>
</div>
);
}
export default App;
さいごに
これだけでGoogleFontsを適用することができます！
基本はindex.htmlでの読み込みを行うときがほとんどだと思いますが、そのフォントの使い所を正しく把握していれば、JSファイルを使った読み込みがてきたりと、より適切に美しくコンポーネント分けができそうです。
時間割アプリで使用した他の機能はこちら