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/Lwqjx5nn8n #MANGACLUB @Mangadotclubさんから
    2 日, 14 時間 前

  • ytyng

    ytyng @ytyng

    Python の Typing で、Generator[MangazenkanOrderAdapter, None, None] は Iterator[MangazenkanOrderAdapter] とアノテーションをつけること… https://t.co/SqG9hOtEiF
    3 日, 16 時間 前

  • ytyng

    ytyng @ytyng

    近所に、スーパーバリューっていうスーパーがあるんだけど、店内にいるとたまにBGMが5拍子のアコースティックプログレみたいな音楽になる。めっちゃ耳に残る。あのBGMはなんか意味があるのかなー。
    4 日, 11 時間 前