Android に明朝体がないのは割と知られてる話で、そういう場合は 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
インポート
import 'typeface-sawarabi-mincho/index.css'
ところが、この方法だと Android でちゃんとウェブフォントが反映してくれませんでした。
Vue.js で Android でも表示できるように Google Fonts をつかう
じゃあ、どうすればよいのかという話ですが、普通に CSS の @import で CDN からインポートすればOKでした。
というかこうしないとうまく行かなかった…。
<style>
@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho');
</style>
もしも、普段は sass とか scss で書いていて、 style ブロックに lang="scss" とかつけていた場合は、それとは別に style ブロックを追加してあげます。
<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 内に書いてるんでまぁ当たり前なのかもしれませんが、意外と忘れがちなのは私だけ？）
<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 シリーズを使ってもよいのかも