レンちゃんとペンタ

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

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

Webフォントの読み込みが遅いと、一瞬別のフォントに置き換え表示される事があります。
ほんの数秒の事とはいえ、場合によってはページの表示がダダ崩れして格好悪いですよね。
この現象、コードをちょっと書き換えるだけでカンタンに解決できることがあります。

この記事で分かること

  • Webフォントの表示がおかしくなる理由
  • Webフォントの読み込みを改善するHTMLとCSSの設定

    Webデザインとブログで豊かに引きこもる。

    レンちゃんとペンタ

    Webデザインは器。ブログは中身。
    「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
    おウチで豊かに楽しく暮らす方法をご紹介しています。

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

    フォントのデータって意外に重いんです。
    データサイズは、フォントがカバーしている文字数や使用するスタイルの数(太字、細字、斜体)によりますが、日本語対応でスタイルが豊富に用意されている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フォントの使用

    いつものfont-familyプロパティでこのように表記するだけで、セットしたWebフォントを使用することができます。

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

    まとめ

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

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

    Related Posts