webpack - Material UI の webpack ビルドに Roboto フォントを含める方法は?

Question

Material UI (React) に基づいてWebpackで構築されたプログレッシブWeb アプリの場合、Roboto フォントを適切に含めて、アプリが Google サーバーに依存せず、フォントもオフラインで動作するようにするにはどうすればよいですか?

インストールページはGoogle フォントページを参照しているだけですが、これは明らかにフォントを Google サーバーからダウンロードすることを強制します。
同様のマテリアル UI の問題が Roboto フォントにも存在しますが、それでもフォントファイルの提供は Google に依存しています。
Roboto フォントファイルを提供する NPM パッケージを見つけましたが、多くのスタイルとフォント形式が提供されており、Material UI が実際に必要とするスタイルがわからないため、これらのファイルを含める方法がわかりません。また、@import を介して単純にこれらのフォントファミリをインポートすると、パフォーマンスの問題が発生するようです。

では、適切なRoboto ファイルをアプリケーションにバンドルするための適切でシンプルなソリューションは何でしょうか?

score 4 · Accepted Answer

import 'typeface-roboto'理想的で簡単ではないAngularを使用する場合は、ここで提案されているものとは少し異なる場合があります。

まず、他の人が説明したように、この素敵な npm パッケージをインストールします。

npm install typeface-roboto --save

次に、これをに追加しますangular.json：

"styles": [
  "node_modules/typeface-roboto/index.css",
  [...],
  "src/styles.css"
],

6 に答える 6