Template for WebFontLoader

HTML
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

https://github.com/typekit/webfontloader

Current rating: 1
The author runs the application development company Cyberneura.
We look forward to discussing your development needs.

Comments

Archive

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