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;
}
出力：
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つの異なる方法を学びました。
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