読み込みが遅いWebフォント、これで速攻解決するかも
Webフォントの読み込みが遅いと、一瞬別のフォントに置き換え表示される事があります。
ほんの数秒の事とはいえ、場合によってはページの表示がダダ崩れして格好悪いですよね。
この現象、コードをちょっと書き換えるだけでカンタンに解決できることがあります。
この記事で分かること
- Webフォントの表示がおかしくなる理由
- Webフォントの読み込みを改善するHTMLとCSSの設定
豊かに引きこもる。
Webデザインは器。ブログは中身。
「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
おウチで豊かに楽しく暮らす方法をご紹介しています。
そもそもなぜ表示がおかしくなるのか
フォントのデータって意外に重いんです。
データサイズは、フォントがカバーしている文字数や使用するスタイルの数（太字、細字、斜体）によりますが、日本語対応でスタイルが豊富に用意されている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フォントの使用
いつものfont-familyプロパティでこのように表記するだけで、セットしたWebフォントを使用することができます。
p{
font-family:'Webフォント名';
}まとめ
Webフォント事情による表示崩れやチラつきのせいで、せっかくのデザインが台無しになってしまっては勿体ないですよね。
ぜひ試してみてください。
