Node Package Managerを使用して、特定のCSSオープンソースフォントをプロジェクトにロードおよびインポートします...
フォントのインポートにより簡単になりました...必要なフォントのみをインポートしてロードします。
例として:私のCSSテーマは、バリエーション300,400,500,700のRobotoフォントで動作します。私がしなければならないのは、その特定のフォントとそれがバリエーションであることです。
このパッケージはあなたのためにそれをします。
このサービスは、すべてのフォントのバリエーションがすべて一緒にロードされており、大規模なダウンロードされたフォントによりパフォーマンスを低下させるカイルマシューズの書体プロジェクトに触発されました。
Googleフォントで以下を実行できる方法:。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500italic,700&display=swap" />
これで、NPMでも同じことができます。
npm install --save font-face-roboto
各フォントフォントフェイスには、必要なすべてのフォントファイルがバンドルされています。
プロジェクトで使用するには、エントリポイントに追加およびインポートします。
import "typeface-roboto/300-400-500i-700.css";
上記を行うと、300ノーマル、400ノーマル、500イタリック、700ノーマルのみのバリエーションでロボットフォントをインポートします。
書体は、CSSとフォントファイルをロードするためにローダーセットアップを備えたWebpackを使用していることを前提としています(他のセットアップで書体を使用できますが、Webpackは本当にシンプルになります)。 WebPack構成が正しく設定されていると仮定すると、プロジェクトのエントリファイルに書体を要求するだけです。
必要なファイルをプロジェクトにバンドルして注入するために、Webpackと一緒に使用します。
Create-React-AppやGatsbyなどのツールは、これと一緒にボックスで作業しています。
あなたのReactプロジェクトで自由に使用してください。
このプロジェクトへのサポートと貢献は非常に高く評価されています!!!