web-dev-qa-db-ja.com

create-react-appビルドにGoogleWebフォントを完全に含める（イジェクトなし）

React webapp using create-react-appを使用して、Google Webフォントをビルドする必要があります。これは、アプリがインターネットにアクセスできないWi-Fiで提供されるためです。最も簡単です。解決策は google-fonts-webpack-plugin のようですが、カスタマイズされたwebpack構成が必要です。

Create-react-appからイジェクトする必要なしに、すべてのWebフォントリソースを自動的にダウンロードして含める「シンプルな」ソリューションはありますか？

reactjscreate-react-appgoogle-fonts
5
code_onkel

これを行うには複数の方法があります。

1.フォントのインポート

たとえば、Robotoを使用する場合は、

yarn add typeface-roboto

または

npm install typeface-roboto --save

Index.jsの場合：

import "typeface-roboto";

多くのオープンソースフォントとほとんどのGoogleフォント用のnpmパッケージがあります。あなたはすべてのフォントを見ることができます ここ 。すべてのパッケージはそれからのものです プロジェクト 。

2.フォントを手動でダウンロードし、スタイルシートに追加します

フォントは fonts.google.com からダウンロードできます。

fonts.google.com page

これで、フォントをsrc/fonts/Lato.woffに配置し、それをindex.cssで使用できます。

@font-face {
    font-family: 'Lato';
    src: local('Lato'), url(./fonts/Lato.woff) format('woff');
}

ttfフォントの場合、フォーマットのパラメータとしてtruetypeではなくttfを指定する必要があります

これをindex.jsにインポートして、利用できるようにすることができます

import './index.css';

これらはApp.css、App.jsでも実行できます。それはあなたの好みです。

9
sudo bangbang