Androidでだけウェブフォントを読み込む方法！これで明朝、游ゴシックも

現在は游明朝、游ゴシックという綺麗なフォントがWindowsに入っていて、iOSにはヒラギノがあるので、それで代替できるけど、Androidだけメイリオが表示されて困る！

と思っているあなたに、Androidでだけウェブフォントを読み込む方法をご紹介します。

Androidでだけウェブフォントを読み込む方法

ユーザーエージェント文字列にAndroidが含まれるかをJavaScriptで判別

ユーザーエージェント文字列にAndroidが含まれるかをJavaScriptで判別し、含まれていたらbody要素にクラス名を付与します。

if(/Android/i.test(navigator.userAgent)) {
  document.body.classList.add('ua-android');
}

Chromeでユーザーエージェントが使えなくなるという情報を見たことがありますが、取得できる情報が削減されるのであって、Androidに関しては問題なく現在でも取得できます。

Androidの時だけ付けたクラス名を用いてウェブフォントを指定

あとは、Androidの時だけ付けたクラス名を用いてウェブフォントを指定すれば終わりです。

.ua-android{
/* Androidの時だけ指定したいフォントを指定する */
}

Androidで游ゴシックを使う方法

游ゴシックは有料フォントで配布されているものもありますし、Adobeフォントにも含まれます。
例えばAdobeフォントを用いるなら、上述のユーザーエージェント判別のJavaScriptの中で、次のようにすればCSSで指定できます。

if(/Android/i.test(navigator.userAgent)) {
  /* ここにAdobeフォントを利用するためのコード */
  document.body.classList.add('ua-android');
}

まとめ

Adobeフォントは読み込みに時間がかかりますし、何を使うにせよ、ウェブフォントは多少なり重くなるので、必要最低限の利用にしたいという意味で、Androidでだけウェブフォントを読み込ませるというのは考えても良いのではないでしょうか。