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');
}

助言がありますか？

-編集

ダンが回答に言及した要点を含める

➜  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');
}

で始まる相対パスを使用していることに注意してください ./。これは、ビルドパイプライン（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ファイルが縮小されず、ハッシュも取得されないことです。そのため、エンドユーザーにとっては遅くなり、ブラウザが古いバージョンのファイルをキャッシュするリスクがあります。

 どちらの方法を使用しますか？

最初の方法（「インポートの使用」）に進みます。それはあなたがしようとしたことなので（コメントで判断して）、2番目のものだけを説明しましたが、多くの問題があり、いくつかの問題を回避するときの最後の手段にすぎません。

これを行ういくつかの方法を次に示します。

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

たとえば、Robotoを使用するには、次を使用してパッケージをインストールします。

yarn add typeface-roboto

または

npm install typeface-roboto --save

index.jsの場合：

import "typeface-roboto";

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

2.サードパーティがホストするフォントの場合

たとえば、Googleフォントの場合、fonts.google.comにアクセスして、リンクを見つけることができます。public/index.html

のようになります

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

または

<style>
    @import url('https://fonts.googleapis.com/css?family=Montserrat');
</style>

3.フォントをダウンロードして、ソースコードに追加します。

フォントをダウンロードします。たとえば、Googleフォントの場合、fonts.google.comにアクセスできます。ダウンロードボタンをクリックしてフォントをダウンロードしてください。

フォントを移動しfonts、あなたのディレクトリsrcディレクトリ

src
|
`----fonts
|      |
|      `-Lato/Lato-Black.ttf
|       -Lato/Lato-BlackItalic.ttf
|       -Lato/Lato-Bold.ttf
|       -Lato/Lato-BoldItalic.ttf
|       -Lato/Lato-Italic.ttf
|       -Lato/Lato-Light.ttf
|       -Lato/Lato-LightItalic.ttf
|       -Lato/Lato-Regular.ttf
|       -Lato/Lato-Thin.ttf
|       -Lato/Lato-ThinItalic.ttf
|
`----App.css

今、でApp.css、これを追加します

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

@font-face {
    font-family: 'Lato';
    font-weight: 900;
    src: local('Lato'), url(./fonts/Lato-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 900;
    src: local('Lato'), url(./fonts/Lato-Black.otf) format('opentype');
}

ttf形式については、言及する必要がありますformat('truetype')。の場合woff、format('woff')

これで、クラスでフォントを使用できます。

.modal-title {
    font-family: Lato, Arial, serif;
    font-weight: black;
}

4. web-font-loaderパッケージの使用

を使用してパッケージをインストールする

yarn add webfontloader

または

npm install webfontloader --save

ではsrc/index.js、これをインポートして必要なフォントを指定できます

import WebFont from 'webfontloader';

WebFont.load({
   google: {
     families: ['Titillium Web:300,400,700', 'sans-serif']
   }
});

1. Google Fonts https://fonts.google.com/にアクセスします
2. 下の画像に示すようにフォントを選択します。

3. そのURLをコピーして新しいタブに貼り付けると、そのフォントを追加するためのCSSコードが表示されます。この場合に行く場合

https://fonts.googleapis.com/css?family=Spicy+Rice

次のように開きます。

4、style.cssにそのコードをコピーして貼り付け、次のようにそのフォントの使用を開始します。

      <Typography
          variant="h1"
          gutterBottom
          style={{ fontFamily: "Spicy Rice", color: "pink" }}
        >
          React Rock
        </Typography>

結果：

プロセスを大幅に簡素化するWebFontモジュールを使用できます。

render(){
  webfont.load({
     custom: {
       families: ['MyFont'],
       urls: ['/fonts/MyFont.woff']
     }
  });
  return (
    <div style={your style} >
      your text!
    </div>
  );
}

私はこのような間違いを犯していました。

@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&subset=cyrillic,cyrillic-ext,latin-ext";
@import "https://use.fontawesome.com/releases/v5.3.1/css/all.css";

このように正しく動作します

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&subset=cyrillic,cyrillic-ext,latin-ext);
@import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);

私はこのスタックの質問にたどり着いた後、午前中ずっと同じような問題の解決に費やしました。私は上記の答えの中で、Danの最初のソリューションをジャンプオフポイントとして使用しました。

問題

開発（これは私のローカルマシン上にあります）、ステージング、および運用環境があります。私のステージング環境と本番環境は同じサーバー上にあります。

アプリはステージング経由でデプロイされacmeserver/~staging/note-taking-app、製品版はacmeserver/note-taking-app（ITを非難する）に存在します。

フォントなどのすべてのメディアファイルは、dev（つまりreact-scripts start）で完全に正常に読み込まれていました。

ただし、ステージングおよびプロダクションビルドを作成してアップロードしたときに、.cssおよび.jsファイルが正しくロードされていても、フォントはそうではありませんでした。コンパイルされた.cssファイルは正しいパスを持っているように見えましたが、ブラウザーのhttpリクエストが非常に間違ったパスを取得していました（以下を参照）。

コンパイルされたmain.fc70b10f.chunk.cssファイル：

@font-face {
  font-family: SairaStencilOne-Regular;
  src: url(note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf) ("truetype");
}

ブラウザのhttpリクエストを以下に示します。/static/css/フォントファイルが存在するときに追加されていること、/static/media/および宛先フォルダを複製していることに注意してください。私はサーバーの設定が原因であることを除外しました。

Refererあまりにも故障し、部分的にです。

GET /~staging/note-taking-app/static/css/note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf HTTP/1.1
Host: acmeserver
Origin: http://acmeserver
Referer: http://acmeserver/~staging/note-taking-app/static/css/main.fc70b10f.chunk.css

package.jsonファイルが持っていたhomepageにプロパティセットを./note-taking-app。これが問題の原因でした。

{
  "name": "note-taking-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "./note-taking-app",
  "scripts": {
    "start": "env-cmd -e development react-scripts start",
    "build": "react-scripts build",
    "build:staging": "env-cmd -e staging npm run build",
    "build:production": "env-cmd -e production npm run build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  //...
}

解決

それは長い間苦労しました—しかし、解決策は：

1. PUBLIC_URL環境に応じて環境変数を変更する
2. homepageからプロパティを削除しますpackage.jsonファイル

以下は私の.env-cmdrcファイルです。すべてを1つのファイルにまとめるので、私は.env-cmdrc定期的に使用してい.envます。

{
  "development": {
    "PUBLIC_URL": "",
    "REACT_APP_API": "http://acmeserver/~staging/note-taking-app/api"
  },
  "staging": {
    "PUBLIC_URL": "/~staging/note-taking-app",
    "REACT_APP_API": "http://acmeserver/~staging/note-taking-app/api"
  },
  "production": {
    "PUBLIC_URL": "/note-taking-app",
    "REACT_APP_API": "http://acmeserver/note-taking-app/api"
  }
}

経由のルーティングreact-router-domも問題なくPUBLIC_URL機能しbasenameます。単にプロパティとしてenv変数を使用します。

import React from "react";
import { BrowserRouter } from "react-router-dom";

const createRouter = RootComponent => (
  <BrowserRouter basename={process.env.PUBLIC_URL}>
    <RootComponent />
  </BrowserRouter>
);

export { createRouter };

サーバー構成は、すべてのリクエストを ./index.htmlファイルます。

最後に、main.fc70b10f.chunk.css議論された変更が実装された後、コンパイルされたファイルは次のようになります。

@font-face {
  font-family: SairaStencilOne-Regular;
  src: url(/~staging/note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf)
    format("truetype");
}

読み物

• https://create-react-app.dev/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env

• https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing

• https://create-react-app.dev/docs/advanced-configuration

  • これは説明します PUBLIC_URL環境変数をます

    Create React Appは、package.json（ホームページ）で指定されているように、アプリケーションがサービスを提供するWebサーバーのルートまたはサブパスでホストされていることを前提としています。通常、Create React Appはホスト名を無視します。この変数を使用して、指定したURL（ホスト名を含む）をそのままアセットに強制的に参照させることができます。これは、CDNを使用してアプリケーションをホストする場合に特に役立ちます。