Webフォントを使うと、そのフォントが読み込み完了するまでの間、文字が全く表示されない瞬間があります。
英字フォントはファイルサイズが数十KB〜数百KB程度と軽いので気づきにくいですが、日本語フォントは形が複雑かつ文字数が膨大なのでファイルサイズが数MB〜数十MBあり、読み込みに時間がかかります。
1秒前後で表示されるので致命的なことではありませんが、見た目がチラつきますし、何も表示されない瞬間を見た訪問者は驚きます。
その問題はCSS3の font-display で緩和できます。
[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」
こちらで紹介されている例を引用し、 Open Sans Regular というWebフォントをチラつき無しで使いたい時は以下のように記述します。
@font-face {
font-family: "Open Sans Regular";
font-weight: 400;
font-style: normal;
src: url("fonts/OpenSans-Regular-BasicLatin.woff2") format("woff2");
font-display: swap;
}
これで解決… とはいきません！
font-displayの記述には上記コード5行目、src: url(〜);のように、フォントファイルのパス指定が必要です。
Adobe TypekitやモリサワTypeSquareなど、フォントファイルが提供者のサーバーに非公開で置かれているCDN型Webフォントサービスでは使えません。
対策
CSSレベルでの対応不可。
フォントファイルを買って自分のサーバに置くのみ。
CDN型Webフォントのフォントファイルは人様のサーバにあるので手の出しようがありません。
技術的にアレコレしてCDNからフォントファイルを引っこ抜いてくるのも当然ライセンス違反です。
フォントサービスの提供元もCDNサーバの性能を上げたり企業努力はしていますが、訪問者の回線速度にも依存します。サイト運営社が打てる手はWebフォントの提供元からフォントファイルを購入してサーバへ直接置くのみです。
日本語フォントはライセンスによりますが一般的に数万〜数十万円します。対してCDN型Webフォントサービスは無料or安価なので、そこは予算との兼ね合いということで…
