React.jsでGoogleフォントを使用する方法

React.jsとwebpackでウェブサイトを構築しました。

WebページでGoogleフォントを使用したいので、セクションにリンクを配置します。

Googleフォント

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

そしてCSSを設定する

body{
    font-family: 'Bungee Inline', cursive;
}

ただし、機能しません。

この問題を解決するにはどうすればよいですか？

ある種のメインまたは最初の読み込みCSSファイルでは、次のようにします。

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext');

@ font-faceなどでラップする必要はありません。GoogleのAPIから返される応答は準備ができており、通常のようにフォントファミリーを使用できます。

次に、メインのReactアプリのJavaScriptの上部に次のように記述します。

import './assets/css/fonts.css';

私が実際にしたapp.cssことfonts.cssは、いくつかのフォントのインポートでインポートされた 単に整理するために（今、すべてのフォントがどこにあるかわかっています）。覚えておくべき重要なことは、最初にフォントをインポートすることです。

Reactアプリにインポートするコンポーネントは、スタイルのインポート後にインポートする必要があることに注意してください。特に、それらのコンポーネントが独自のスタイルをインポートする場合も同様です。このようにして、スタイルの順序を確認できます。これが、メインファイルの上部にあるフォントをインポートするのが最善の理由です（問題がある場合は、最終的にバンドルされたCSSファイルを確認して、再確認してください）。

フォントの読み込み時などにGoogle Font APIを渡してより効率的にすることができるいくつかのオプションがあります。公式ドキュメントを参照してください：Google Fonts APIの使用を開始する

編集、注意：「オフライン」アプリケーションを扱っている場合、フォントをダウンロードしてWebpackからロードする必要があるかもしれません。

React.jsのGoogleフォント？

スタイルシート、つまりapp.css、style.css（名前）を開きます。問題はありません。スタイルシートを開いてこのコードを貼り付けてください。

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

必要なフォントのURLを変更することを忘れないでください。

これを次のように使用します：

body {
  font-family: 'Josefin Sans', cursive;
}

Create React App環境を使用している場合は、@ importルールをindex.cssに追加するだけです。

@import url('https://fonts.googleapis.com/css?family=Anton');

メインのReactアプリにindex.cssをインポートします。

import './index.css'

Reactでは、CSSを適用するために、インラインスタイル、CSSモジュール、またはスタイル付きコンポーネントを選択できます。

font-family: 'Anton', sans-serif;

このチュートリアルが表示されます：https : //scotch.io/@micwanyoike/how-to-add-fonts-to-a-react-project

import WebFont from 'webfontloader';

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

私はこの方法を試したところ、非常にうまく機能していると言えます;）

create-react-appのApp.cssなどのCSSファイルにfontfaceインポートを追加します。例えば：

@fontface {
  font-family: 'Bungee Inline', cursive;
  src: url('https://fonts.googleapis.com/css?family=Bungee+Inline')
}

次に、同じcssファイル内のDOM要素にフォントを追加します。

body {
  font-family: 'Bungee Inline', cursive;
}

同じ問題があった。の"代わりに使用していたことがわかりました'。

@import url('within single quotes');このように使う

@import url("within double quotes");これは好きじゃない

@importと@ font-faceをcssファイルに追加しましたが、うまくいきました。

ここでは良い答えのすべてに別のオプションは、NPMパッケージであるreact-google-font-loader、見つけここに。

使い方は簡単です：

import GoogleFontLoader from 'react-google-font-loader';

// Somewhere in your React tree:

<GoogleFontLoader
    fonts={[
        {
            font: 'Bungee Inline',
            weights: [400],
        },
    ]}
/>

次に、CSSでファミリ名を使用できます。

body {
    font-family: 'Bungee Inline', cursive;
}

免責事項：私はreact-google-font-loaderパッケージの作者です。

（.less）で解決策を探している人がいる場合は、以下を試してください。メインまたは一般的なlessファイルを開き、以下のように使用します。

@import (css) url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

body{
  font-family: "Open Sans", sans-serif;
}

それは可能性が最後にリンクの自己終了タグで、試してみてください。

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

そしてあなたのmain.cssファイルで試してください：

body,div {
  font-family: 'Bungee Inline', cursive;
}

ここに、reactアプリにフォントを追加する2つの方法があります。

ローカルフォントの追加

1. 名前の新しいフォルダを作成しfonts、あなたの中にsrcフォルダを。

2. Googleフォントをローカルにダウンロードし、fontsフォルダー内に配置します。

3. index.cssファイルを開き、パスを参照してフォントを含めます。

@font-face {
  font-family: 'Rajdhani';
  src: local('Rajdhani'), url(./fonts/Rajdhani/Rajdhani-Regular.ttf) format('truetype');
}

ここにRajdhaniフォントを追加しました。

これで、このようなcssクラスでフォントを使用できます。

.title{
    font-family: Rajdhani, serif;
    color: #0004;
}

Googleフォントを追加する

ローカルフォントの代わりにgoogleフォント（api）を使用する場合は、次のように追加できます。

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap');

同様に、タグindex.htmlを使用してファイル内に追加することもできますlink。

<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap" rel="stylesheet">

（最初はhttps://reactgo.com/add-fonts-to-react-app/に投稿されています）