web-dev-qa-db-ja.com

VueJSコンポーネントにGoogleフォントを追加するにはどうすればよいですか？

Google FontをVueJSコンポーネントにインポートする方法を見つけるために1時間かけて努力しましたが、解決策が見つからないようです。まだ機能していません。私が見つけたすべての答えは、現在1.5〜2歳です。誰かが最新の解決策を提案できれば、とても感謝しています。

VueJS2 + Webpack + Vue-cliを使用しています

vue.jsfontsvuejs2
9
Holiday

最速の方法は、CSSファイルにフォントをインポートすることです。たとえば、App.css、すべてのコンポーネントに必要な場合：

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

html, body {
  font-family: 'Roboto Condensed', sans-serif;
}

#app {
  font-family: 'Roboto Condensed', sans-serif;
}

インポートステートメントは、Googleフォントでも表示されます（@IMPORT選択ウィンドウで）：

Google Fonts

21
Bennett Dams

Imo、VueJSを使用している場合、Google Fonts Webpackプラグインが最適です。

ここに plugin があります。設定は本当に簡単で、魅力のように機能します。

npm i google-fonts-webpack-plugin -D

/webpack.config.js/webpack.base.config.jsそして次の行を追加します。

const GoogleFontsPlugin = require("google-fonts-webpack-plugin")

module.exports = {
    "entry": "index.js",
    /* ... */
    plugins: [
        new GoogleFontsPlugin({
            fonts: [
                { family: "Source Sans Pro" },
                { family: "Roboto", variants: [ "400", "700italic" ] }
            ]
        })
    ]
}

これで、VueJSプロジェクト内のどこでもGoogle Fontsを使用できます:)

6
msqar

Msqarによって与えられた答えに追加したいと思います。 Google Fonts Webpackプラグインを使用する場合：（ https://www.npmjs.com/package/google-fonts-webpack-plugin ）で、Vue CLIでは、プロジェクトのルート内にvue.config.jsファイルを追加できます。Vue CLIドキュメント：（- https：//cli.vuejs。 org/guide/webpack.html＃simple-configuration ）

次に、そのファイルにコードを追加します。

 const GoogleFontsPlugin = require("google-fonts-webpack-plugin");

 module.exports = {
    chainWebpack: config => {
        plugins: [
            new GoogleFontsPlugin({
                fonts: [
                    { family: "Source Sans Pro" }
                ]
            })
        ]
     }
 }
4
Michael Hicks

Vue2では、vueコンポーネント内のセクションにあるフォントを@importするだけです。

<style>
@import url('https://fonts.googleapis.com/css?family=Proza+Libre');
h1 {
    font-family: 'Proza Libre', sans-serif;
    color: seagreen;
    font-weight: 300;
}
</style>
2
Elisabeth Shevtsova

私は現在次のようにやっています：

  • Npmでフォントの書体をインストールします（例：npm install --save typeface-source-sans-pro）
  • コンポーネントに書体をインポートします（import 'typeface-titillium-web';）
  • コンポーネント（font-family: 'Titillium Web', sans-serif;）

これにより、フォントは自己ホストされることに注意してください。そのため、cdnでキャッシュされたフォントをサポートしなくなりました。

1
schnetzi