Vue.js で Android 向けに明朝体を使いたい #webfont

Andoroid に明朝体がないのは割と知られてる話で、そういう場合は Google Web フォントとか使うのが一般的ですが、
Vue.js でやったときにちょっとハマったのでメモ。

TL;DR

npm パッケージのフォントだとダメっぽい（パッケージ内での実装方法にもよるかも？）
CSS の @import で読ませればOK
または vue-head パッケージ使ってるならそれを使ってもOK

Vue.js で Google Fonts を使う

実は、Google Fonts で公開されているフォントはほとんどが npm パッケージからの導入もできて、
typaface/xxx （あるいは typeface-xxx）みたいな感じで検索するとでてきます。

main.js でインポートすればすぐつかえるので、私はいつもこの方法でやっていました。

たとえば、さわらび明朝ならこんなふうに。

インストール

npm install typeface-sawarabi-mincho --save
# or
yarn add typeface-sawarabi-mincho

インポート

main.js

import 'typeface-sawarabi-mincho/index.css'

ところが、この方法だと Android でちゃんとウェブフォントが反映してくれませんでした。

Vue.js で Android でも表示できるように Google Fonts をつかう

じゃあ、どうすればよいのかという話ですが、普通に CSS の @import で CDN からインポートすればOKでした。
というかこうしないとうまく行かなかった…。

FrontPage.vue

<style>
@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho');
</style>

もしも、普段は sass とか scss で書いていて、 style ブロックに lang="scss" とかつけていた場合は、それとは別に style ブロックを追加してあげます。

FrontPage.vue

<style>
@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho');
</style>

<style lang="scss">
html {
  font-size: 62.5%;
  font-family: "Sawarabi Mincho", "Hiragino Mincho Pro", "MS Mincho", sans-serif;
}

#app {
  .section {
  // ...
  }
}
</style>

これでOKでした。

vue-head で読ませる

CSS の @import はつかいたくないなぁ、って場合は、HEADタグに突っ込むわけですが、できれば public/index.html は触りたくないなぁ、ということで、<header></header> にいろいろ追加できる vue-head を使えばできます。
これは、meta とか title を書き換えるのに使うことが多いですが、スタイルシートや JS、favicon なんかも読ませることができます。
（これらも HEAD 内に書いてるんでまぁ当たり前なのかもしれませんが、意外と忘れがちなのは私だけ？）

FrontPage.vue

<script>
export default {
  head: {
    link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Sawarabi+Mincho' },
    ]
  },
}
</script>

まとめ

とりあえず、vue-router も使ってて、タイトル書き換えとかしてるなら vue-head つかってるだろうから、そこで読ませる。
ルーター使ってないような LP などの超シンプルページの場合は、 style ブロックに @import するか、それでもヘッダーにはいろいろ書くだろうから、vue-head 入れちゃうのがやっぱり楽かも。
Vue + Electron みたいな感じで、PC/Mac 向けのアプリにするとかで、Android 全く考慮しないで良い＆どうしてもオフラインで使わなくちゃいけないってときは、 npm の typeface シリーズを使ってもよいのかも