vue.jsでGoogle Fontsの日本語webフォントを適用する

vue-cliで作成したwebpackテンプレートでgoogleの日本語webフォントを使えるように設定します。

好きなフォントを見繕う

Google Fonts
https://fonts.google.com/
https://googlefonts.github.io/japanese/

上記サイトから使用したいフォント名をコピーしてきます。
例では"M PLUS Rounded 1c"を選択。

いつもの

npm i google-fonts-webpack-plugin --save-dev

または

yarn add google-fonts-webpack-plugin --dev

webpack.base.config.jsに追記

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

module.exports = {
    "entry": "index.js",
    /* ... */
    plugins: [
        new GoogleFontsPlugin({
            fonts: [
                { family: "M PLUS Rounded 1c" }
            ]
        })
    ]
}

使用したいフォントを指定します。

これでプロジェクト内でGoogle Fontを使用できるようになりました！

使ってみる

適用したい箇所にスタイルを指定するだけ。

<style>
#app {
  font-family: 'M PLUS Rounded 1c';
</style>

できました！

参考：Google Fonts Webpack Plugin
https://github.com/gabiseabra/google-fonts-webpack-plugin