web-dev-qa-db-ja.com

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

ただし、機能しません。

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

reactjswebpackgoogle-font-api
59
Kevin Hsiao

ある種のメインまたは最初にロードする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を渡して、フォントのロード時などの効率を高めることができるオプションがいくつかあります。公式ドキュメントを参照してください。 https://developers.google.com/fonts/docs/getting_started

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

42
Tom

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

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

そして、あなたが望むフォントのURLを変更することを忘れないでください

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

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

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

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

インポートindex.cssメインReactアプリで：

import './index.css'

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

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

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;
}
5
mrdougwright

このチュートリアルが表示されます： 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']
  }
});

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

4
aldobsom

同じ問題があった。 "ではなく'を使用していたことがわかりました。

このように@import url('within single quotes');を使用します

このような@import url("within double quotes");ではない

3
Deke

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

2
Heather Akpan

ここでのすべての適切な答えに対する別のオプションは、npmパッケージreact-google-font-loaderで、 here が見つかりました。

使い方は簡単です：

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パッケージの作成者です。

0
Jake Taylor