Androidスマホで
ウェブフォントが使えない・きかない時の対処法

ウェブページ制作で便利なウェブフォント。

ウェブページのフォントは、せっかくCSSファイルからフォント指定をしても、フォントデータの入っていない端末では表示する事ができません。

そこでウェブフォント！

ウェブフォントではオンライン上でフォントデータを取得するので、どの端末で見ても同じフォントを表示する事が出来ます！

ところが、これでフォントはばっちこい！　と、喜びいさんでスマホでサイトを見てみると、全く利いていない事があります。

なにやらAndroid端末ではウェブフォントが使えない仕様があるとかで、外部サイトからフォントデータを引っぱって来る事が出来ないようです。

ここでは、それでもウェブフォントを使いたいんじゃー！　といった時に、私が使った対処法をご紹介します。

Androidスマホでも
ウェブフォントを表示するには？

Android端末でウェブフォントが使えないのは「外部サイトからフォントデータを引っぱってくる」場合でした。

それでもウェブフォントを使いたい場合は、フォントデータをダウンロードして自分の使っているサーバー内に設置すれば、Android端末でもビシッとウェブフォントを表示する事ができます。

多くのウェブフォントは「CDN（コンテンツデリバリネットワーク）」タイプのものが多く、ネット上にあるデータを読み込んで使うので、リンクを書くだけで導入できます。

一方、ダウンロード版は、フォントファイルを自分でサーバーに設置して利用します。

CSSファイルみたいな感じですね。

こういったダウンロード版のウェブフォントセットを使うと、Android端末からでもウェブフォントを表示させる事ができます。

ダウンロードファイルの提供がある場合は簡単に導入できるので、使いたいフォントで用意されているか一度チェックしてみましょう！

ダウンロード版ウェブフォントの使い方

ダウンロード版でウェブフォントを使う場合は、自分のサーバーに設置するので、CSSファイルからのリンクの書き方も変わってきます。

ここでは、CSSフォルダ内に「font.woff」という名前のフォントファイルを設置した場合を例に、書き方を見ていきましょう！

style
└style.css
　font.woff

HTMLファイルでの準備

まずはHTMLファイル。ここでは「class="webfont"」を指定した部分に、ウェブフォントを使ってみます。

<div class="webfont">
<p>ウェブフォント</p>
<div>

フォント登録・指定の書き方

ウェブフォントを使う時は、最初に「@font-face」でフォント登録をします。

「font-family:」でフォントに名前をつけて、「src: url」でCSSファイルから見たフォントファイルの設置場所を指定します。

あとは続けて「format」でファイル形式（ファイル拡張子）を指定すればOKです。

@font-face {
    font-family: 'webfont';
    src: url("font.woff")  format('woff');
}

あとは、使いたい「class」から、さっきつけたフォント名を「font-family:」で指定すれば完了です。

.webfont{
  font-family: 'webfont;
}

Androidスマホでも
ウェブフォント！まとめ

ダウンロード版のウェブフォントなら、Android端末で「CDN」タイプのウェブフォントが使えない、利かない場合でも、ウェブフォントを使う事ができます。

必ずしもダウンロード版を提供してくれているウェブフォントばかりではありませんが、ちょっとした小技として覚えておくと便利です。