WebFontLoaderひな型
2015-12-02 18:32 (9年前)
ytyng
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;
}
でいけると思う。
参考
コメント