Template for WebFontLoader
2015-12-02 18:32 (9 years ago)
ytyng
When using WebFont, you may encounter a phenomenon called FOUT (Flash of Unstyled Text) where text is not displayed if the font fails to load.
By using WebFontLoader, you can display a fallback font until the desired font is fully loaded.
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");
}
Main css
.wf-active * {
font-family: "light-ja", sans-serif;
}
I think this should work.
References
Comments