Template for WebFontLoader

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

https://github.com/typekit/webfontloader