【React】カスタムフォントの適用方法

Reactでのカスタムフォントの使い方についてまとめました。

親切にもcreate-react-appで立ち上がるアプリにカスタムフォントが使用されていました!

create-react-app で生成されるコードより、関係するところだけ抜粋しています。

こちらは、create-react-app で生成されるコードです。

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">

        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>

      </header>
    </div>
  );
}

export default App;

この中の、注目スべきは<code>タグで、この部分がカスタムフォントを指定しているところです。

どのように指定しているかというと…

cssファイルに以下のように記述します。

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

これでOKです!

今回は.cssファイルを作成しましたが、cssの適用の仕方は他にもいろいろな方法があるのでこちらをご参照ください。

以上、お読みいただきありがとうございました。

コメント