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

    俺もスタバアプリにログインできないよ
    1 ヶ月, 1 週間 前

  • 安藤拓郎 Takuro Ando

    安藤拓郎 Takuro Ando @takuroando

    ytyng

    これまでいろんなグッズを作ってきたけど、今回は「お米」と聞いて買うしかないなと。今夜の夕食はコシヒカリ!箸もセットだし^^ https://t.co/01ucQx9qtw #腰乃展 #マンガ展 https://t.co/4VL2vOe0Og
    1 ヶ月, 3 週間 前

  • ytyng

    ytyng @ytyng

    講談社さんとやった全部入り電子書籍セットがギネスブックに登録されたよー https://t.co/rbkd3IYub0
    1 ヶ月, 3 週間 前