Google Fontsとは

なぜか(日本語で)解説してる記事がほぼないので紹介します．
私の環境はvue-cliを用いてvue.jsを生成しています．

Google Fontsは，無料で使えるwebフォントです．基本的にwebサイトを作成するとフォントはブラウザー側で保持している任意のフォントで返します．なのでhtmlを読み込む際にwebフォントのパスを渡し，ブラウザにwebフォントをダウンロードしてもらうことで，どんな環境でも同一のフォントを表示させれるようになります．ちなみに様々な言語に対応しており，日本語フォントも十分にあります．

メリットは上記に述べたように，環境に依存しないフォントの表示を可能にすることですが，デメリットとして使用するフォントを増やせばそれだけウェブサイトの表示が遅くなります．この問題の解決として使用しない文字のデータの削除など様々な技術があるようですが，ここでは触れません．

ここからは，単純にVue.jsへのGoogle Fontsの導入を紹介します．

導入

Google Fonts Webpack Plugin
基本は上記に沿って行けば大丈夫ですが，英語なのでここで紹介してみます．
Google Fonts Webpackプラグインを使用します．

まずインストール

npm install google-fonts-webpack-plugin

そのあとに，/webpack.config.jsに以下をぶち込めば準備完了になります．

webpack.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" ] }
           /*ここにフォントを追加していく．もちろん上のRobotoとSourse sans proは消してよい*/
            ]
            /* ...options */
        })
    ]
}

使い方としては，上記のfontsオブジェクトに自分の使用したいフォントの名前をGoogle Fontsから持ってきて，貼り付ければいいです．
Variantsを指定すれば上記のように細かい指定もできるようになります．

あとはcss上でfont-familyで上記で登録したものを使えば，そのフォントがブラウザ上で使用されることになります．

Vue.jsでは，各々のコンポーネントで指定するのがめんどくさければ以下のように，App.vueで指定しまうのがいいと思います．

App.vue


<style>

template{margin:0px;}
#app {
  font-family: 'Source Sans Pro', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

</style>

使い方はかなり簡単ですね．注意点としては，フォントのライセンスがそれぞれ異なるため再配布や商用利用の場合はよく調べてください．

Google FontsをVue.jsで使用する

Google Fontsとは

導入