[解決済み] create-react-appベースのプロジェクトにフォントを追加する方法は？

質問

を使っています。 create-react-app を使用しないことを希望しています。 eject .

font-faceで取り込んだフォントをローカルに読み込むと、どこに行くのかが不明です。

すなわち、私が読み込んでいるのは

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
}

何かご意見はありますか？

-- EDIT

Danが回答で言及した要点を含む

➜  Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts
total 1168
-rwxr-xr-x@ 1 maximveksler  staff  62676 Mar 17  2014 MYRIADPRO-BOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  61500 Mar 17  2014 MYRIADPRO-BOLDCOND.woff
-rwxr-xr-x@ 1 maximveksler  staff  66024 Mar 17  2014 MYRIADPRO-BOLDCONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  66108 Mar 17  2014 MYRIADPRO-BOLDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  60044 Mar 17  2014 MYRIADPRO-COND.woff
-rwxr-xr-x@ 1 maximveksler  staff  64656 Mar 17  2014 MYRIADPRO-CONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  61848 Mar 17  2014 MYRIADPRO-REGULAR.woff
-rwxr-xr-x@ 1 maximveksler  staff  62448 Mar 17  2014 MYRIADPRO-SEMIBOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  66232 Mar 17  2014 MYRIADPRO-SEMIBOLDIT.woff
➜  Client git:(feature/trivia-game-ui-2) ✗ cat src/containers/GameModule.css
.GameModule {
  padding: 15px;
}

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-REGULAR.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-COND.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Semibold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Semibold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-CONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCOND.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLD.woff') format('woff');
}

解決方法は？

2つの選択肢があります。

インポートを使用する

これは推奨されるオプションです。これにより、フォントがビルドパイプラインを通過し、コンパイル時にハッシュを取得してブラウザのキャッシュが正しく機能するようになり、ファイルが見つからない場合はコンパイルエラーが発生するようになります。

として 画像、フォント、ファイルの追加" で説明しています。 の場合、JSからCSSファイルをインポートしてもらう必要があります。例えば、デフォルトでは src/index.js インポート src/index.css :

import './index.css';

このようなCSSファイルはビルドパイプラインを通過し、フォントや画像を参照することができます。たとえば、あるフォントを src/fonts/MyFont.woff の場合、あなたの index.css には、こんなものがあるかもしれません。

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
  /* other formats include: 'woff2', 'truetype, 'opentype',
                            'embedded-opentype', and 'svg' */
}

で始まる相対パスを使っていることに注目してください。 ./ . これは、ビルドパイプライン（Webpackによる）がこのファイルを発見しやすくするための特別な記法です。

通常はこれで十分なはずです。

使用方法 public フォルダ

もし、何らかの理由で ではなく ビルドパイプラインを使用する代わりに、"古典的な方法 "で行うことができます。 を使用します。 public フォルダ を作成し、そこにフォントを置いてください。

この方法の欠点は、製品用にコンパイルするときにファイルのハッシュを取得しないため、ファイルを変更するたびに名前を更新する必要があることです。

この方法でやりたい場合は、フォントをどこか public フォルダの中に、例えば public/fonts/MyFont.woff . この方法に従えば、CSS ファイルは public フォルダーを作成し ではなく JSからインポートするのは、これらのアプローチが混在すると非常に混乱するからです。それで、それでもやるなら、次のようなファイルを用意することになります。 public/index.css . を手動で追加する必要があります。 <link> からこのスタイルシートに public/index.html :

<link rel="stylesheet" href="%PUBLIC_URL%/index.css">

そしてその内部では、通常のCSS表記を使用することになります。

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

を使っていることに注目してください。 fonts/MyFont.woff をパスとして指定します。これは index.css は public フォルダに格納されているので、公開パス (通常はサーバールートだが、GitHub Pages にデプロイして homepage フィールドを http://myuser.github.io/myproject から提供されます。 /myproject ). しかし fonts はまた public フォルダから提供されます。 fonts のどちらか）。 http://mywebsite.com/fonts または http://myuser.github.io/myproject/fonts ). したがって、相対パスを使用します。

この例では、ビルドパイプラインを避けているので、ファイルが実際に存在するかどうかは検証されないことに注意してください。このため、この方法はあまりお勧めできません。もうひとつの問題は index.css ファイルはminifyされず、ハッシュも取得されない。だから、エンドユーザーにとっては遅くなるし、ブラウザが古いバージョンのファイルをキャッシュしてしまうリスクもある。

 どの方法を使用するか？

最初の方法（「Importsを使用する」）を行ってください。2番目の方法は、あなたがやろうとしていたことなので（あなたのコメントから判断して）、説明しただけですが、多くの問題があり、何らかの問題を回避するための最後の手段であるべきです。