Speaking Design

Blogブログ

読み込みが遅いWebフォント、これで速攻解決するかも

読み込みが遅いWebフォント、これで速攻解決するかも

Webフォントの読み込みが遅くて、一瞬別のフォントに置き換え表示されてしまっていませんか?
ほんの数秒の事とはいえ、場合によってはページの表示がダダ崩れして格好悪いんですよね。

この現象、コードをちょっと書き換えるだけでカンタンに解決するかもしれません。

目次

そもそもなぜ表示がおかしくなるのか

フォントのデータって意外に重いんです。
データサイズは、フォントがカバーしている文字数や使用するスタイルの数(太字、細字、斜体)によりますが、日本語対応でスタイルが豊富に用意されているWebフォントであれば、サイズがメガバイトを超えてしまう場合もあります。

そんなフォントデータの読み込みには当然時間がかかるので、その間に別のフォントで代替表示されているというのが、表示崩れやちらつきの原因です。

ページアクセス時、一瞬だけこんな感じになって、

Webフォント読み込み完了前
Webフォントが間に合ってないため、他のフォントで表示された状態

数秒後、本来のWebフォントで落ち着く現象ですね。

Webフォント読み込み完了後
Webフォントが準備できた状態

これ、Webフォントのデータをプリロード(先読み)させると解決できる事があります。
以下、コードの表記例を紹介します。

HTML側の準備

まずはHTMLの方から。
実装には、おなじみlinkタグを使います。

<link rel="preload" as="font" href="Webフォントのパス" crossorigin>

CSSの外部ファイル読み込み等でよくお世話になるlinkタグ、こんな使い方もできるんですね。

rel属性

HTMLから見た、参照する文書(今回はフォントファイルですが)との関係性です。
先読みしたい場合は属性値を『preload』とします。

as属性

読み込むコンテンツの種類です。
今回はフォントファイルなので属性値を『font』とします。

href属性

Webフォントのパスを入れます。

crossorigin属性(crossorigin=”anonymous”と同義)

Webフォントが同一サーバー内にある場合でも表記が必要です。
どうしてなのか調べてみたら、W3C(HTMLとかのルールを決めている団体)の仕様だそうです。

CSS側の準備

読み込んだWebフォントをCSSで使えるようにします。
@font-face規則を使って、CSSファイルに以下のように記述します。

@font-face {
	font-family: 'Webフォント名';
	src: url('Webフォントのパス') format('woff2');
}

font-familyプロパティ

フォントの名称です。

srcプロパティ

Webフォントの場所(url)と形式(format)を設定します。
urlを相対パス指定する場合は、このCSSファイルから見た位置になります。background-imageを指定する時と同じ要領ですね。
『format』はフォントファイルの形式です。今回はwoff2形式の場合の表記にしています。

フォント形式別、表記の例

・woff形式:format(“woff”)
・TrueType形式:format(“truetype”)
・OpenType形式:format(“opentype”)
・SVG形式:format(“svg”)

必要に応じてfont-weightやfont-styleを追加することもできます。
これで最低限の準備は完了です。

Webフォントの使用

セットしたフォントを実際に使う時には、このように表記します。

p{
	font-family:'Webフォント名';
}

これで、キレイに表示されるはずです。

まとめ

Webフォント事情による表示崩れやチラつきのせいで、せっかくのデザインが台無しになってしまっては勿体ないですよね。
ぜひ試してみてください。