WebFontLoaderひな型

HTML
2015-12-02 18:32 (8年前) ytyng
View in English

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

現在未評価
タイトルとURLをコピー

コメント

アーカイブ

2024
2023
2022
2021
2020
2019
2018
2017
2016
2015
2014
2013
2012
2011