React のフォント

Rana Hasnain Khan 2022年4月18日 React React Fonts
React のフォント

フォントのインストール方法と react でのフォントの使用方法を紹介します。

React のフォント

フォントはウェブサイトの最も重要な部分です。React アプリケーションにフォントをインストールするさまざまな方法があります。

最も一般的な方法は、フォントをインポートすることです。コマンドプロンプトで npm または yarn を使用してフォントをインポートできます。例として Quicksand をインストールしてみましょう。

# react CLI
yarn add typeface-quicksand

また

# react
npm install typeface-quicksand --save

インストール後、index.tsx ファイルにインポートする必要があります。

# react
import 'typeface-quicksand';

これで、style.css ファイルで使用できるようになりました。

# react
h1,
p {
  font-family: Quicksand;
}

出力：

npm と yarn を使用したフォントのインポート

react にフォントをインストールする別の方法は、index.html または style.css ファイルにリンクを直接追加することです。例として Lato フォントをインストールしてみましょう。

# react
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">

または、

# react
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
</style>

Lato フォントをインポートして、見出しと段落のスタイルを変更しましょう。

# react
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
h1,
p {
  font-family: Lato;
}

出力：

リンクを使用したフォントのインポート

react にフォントをインストールするもう一つの方法は、ダウンロードしてソースコードに追加することです。

fonts.google.com からフォントを簡単にダウンロードして、src ディレクトリ内の fonts ディレクトリに移動できます。

次に、style.css で、@font-face を使用してフォントを追加します。

# react
@font-face {
  font-family: 'Lato';
  src: local('Lato'), url(./fonts/Lato-Regular.otf) format('opentype');
}

ttf 形式の場合は format('truetype') に言及する必要があり、woff 形式の場合は format('woff') に言及する必要があります。

これで、このフォントを使用して簡単にスタイルを設定できます。

# react
h1,
p {
  font-family: Lato;
}

出力：

リンクを使用したフォントのインポート

もう 1つの方法は、web-font-loader パッケージを使用することです。npm または yarn を使用して、web-font-loader パッケージを簡単にインストールできます。

# react
yarn add webfontloader

または、

# react
npm install webfontloader --save

これで、index.tsx で、必要なフォントをインポートして指定できます。

# react
import WebFont from 'webfontloader';

WebFont.load({
   google: {
     families: ['Lato:300,400,700', 'sans-serif']
   }
});

そこで今、React でフォントをインストールして使用する 4つの異なる方法を学びました。

チュートリアルを楽しんでいますか？ <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe
著者： Rana Hasnain Khan
Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn