WebFontLoaderひな型

(コメント)

WebFont を使っていると、フォントが読み込まれないと文字が表示されない FOUT という現象が発生する。

WebFontLoader を使って、フォントがロードされるまでの間は代替フォントを表示させる。

JS (HTML)

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script>
  WebFont.load({
    custom: {
      families: ['light-ja'],
      urls: ['css/font.css']
    }
  });
...

css/font.css

@font-face {
    font-family: "light-ja";
    src: url("../fonts/mplus-1p-light.woff");
}

メインのcss

.wf-active * {
    font-family: "light-ja", sans-serif;
}

でいけると思う。

参考

https://github.com/typekit/webfontloader

現在未評価

コメント

最近のツイート

  • ytyng

    ytyng @ytyng

    https://t.co/4BcaKOjNBq ヒカキンさんのマンガ買ったもらった動画を公開後、サイト負荷限界になったけど急いでスケールアップしましたよ。マンガ買ってってー
    1 週間, 5 日 前

  • ytyng

    ytyng @ytyng

    ラズパイ3届いたので倉庫用のスマート時計作る https://t.co/9TfZHOkeTu
    2 週間, 5 日 前

  • ytyng

    ytyng @ytyng

    bootstrap cdn が少しダウンしてた。https://t.co/olTmNrJy33 / https://t.co/M4IqniWeWj どちらも。
    1 ヶ月, 1 週間 前