A JavaScript library for adding class name to `html` element when font loaded.
JavaScript HTML
Latest commit f31ea9e May 3, 2016 @hail2u Bye ESLint
Permalink
Failed to load latest commit information.
test
README.md
bower.json Sort keys in `bower.json` Dec 7, 2014
detect-font-loading.js

README.md

Detect Font Loading

A JavaScript library adds class name to html element when font loaded.

USAGE

If you want to detect "Source Sans Pro" loading, invoke this library by adding following HTML and JavaScript code to HTML:

<script src="detect-font-loading.js"></script>
<script>
  DFL.detect('Source Sans Pro', 30000, 1000);
</script>

If you call function with an array of font names, you can detect multiple fonts at once:

<script src="detect-font-loading.js"></script>
<script>
  DFL.detect(['Foo', 'Bar', 'Buz']);
</script>

Lastly, you need to apply CSS like WebFont Loader:

.dfl-source_sans_pro body {
  font-family: "Source Sans Pro", sans-serif;
}

DETAILS

DFL.detect() function accepts one or more arguments:

  1. font name or font names in array
  2. detection timeout length in ms (optional, default value: 15000)
  3. detection interval length in ms (optional, default value: 500)

CSS class names are generated by:

  1. add dfl- prefix
  2. convert font name to lowercase
  3. replace spaces with underscore

LICENSE

MIT: http://hail2u.mit-license.org/2013