ReactでGoogle fontを使う方法

Google fontにアクセスします

https://fonts.google.com/
1.自分の気に入ったフォントを探します。

2.フォントをクリックするとフォントを取得ボタンが右上に出てくるので取得します。

3.埋め込みコードを取得するをクリックします。

4.＠importを選択します。

Reactでcssを適用させる

cssファイルを作成し、import文を先頭に貼り付けます。
bodyタグのfont-familyをGoogleFontsのFont名にします。

index.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

cssを読み込む

作成したcssを、フォント適用させたいファイルでimportします。

App.tsx

import './index.css';

const App = () => {
}