ウェブフォントの使い方（２）：表示タイミングを制御する場合

ウェブフォントを利用すると個性的なテキスト表示ができますと前に書きました。

いろいろ実験してみたところ、表示に関して、ブラウザのレンダリングでうまくいかないところがあったので、シェアします。

ウェブフォントの使用法（おさらい）

ウェブフォントを使用するには、まずＣＳＳ内で@font-faceを設定しておきます。各ＤＯＭにフォントを適用する際は、font-family属性で指定します。

@font-face{
 font-family: 'notosans';
 src: url('font/NotoSans-Regular.ttf');
}

<p style= "font-family: 'notosans'">text</p>

表示されるけど時間がかかる

実際にやってみると、表示の仕方が不思議になることがあります。いったん指定以外のフォントで内容が表示されて、２秒くらいするとフォントが入れ替わり指定したとおりの表示になります。最終的に
指定通りのフォントになるので、間違いではありません。

バグではなく仕様（らしいです）

どうやらこれは、こうなるもののようです。ウェブフォントは、サーバーにおかれたファイルをダウンロードする必要があります。日本語のフォントのファイルは数MBと比較的大きくダウンロードや検索に時間がかかることから、一時的にデフォルトのフォントで表示し、準備ができた段階で指定したフォントに差し替えています。

仕様でこうなるのだから仕方ないと言えば仕方ないです。しかし、どうしても最初から指定したフォントで表示したいこともあります。そこで
以下にちょっとした工夫を載せておきます。

システムフォントの利用を試す

指定したフォントがアクセスしたPCに入っている可能性は、0ではありません。もし、入っていれば、これを利用することでファイルのダウンロード時間を節約できます。
やり方ですが、CSSでフォントの場所をしていするときにlocal('フォント名')をurl指定の前に挿入します。こうするとまずはシステムのフォントを探しに行き、
見つからなかったらurl指定された先のダウンロードに進むようです。

@font-face{
	font-family:'notosans';
	src:local('Noto Sans'),
	url('font/NotoSans-regular.ttf')
}

フォントキャッシュを利用する

ウェブフォントを利用する際、いったんダウンロードしたフォントファイルはフォントキャッシュに入るようです。これを利用して、タイミングが重要になる文字列の提示前に別の文字列でウェブフォントを指定します。そうすると、フォントがキャッシュに入っている状態で、ウェブフォントを呼び出せるので、呼び出しの時間を短縮できます。