JavaScript

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でだけウェブフォントを読み込ませるというのは考えても良いのではないでしょうか。

著者のイメージ画像

株式会社BringFlower
稲田 高洋(Takahiro Inada)

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有、数年間ウェブアクセシビリティ基盤委員も務める。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。
2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。