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


Detect Font Loading

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


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>
  DFL.detect('Source Sans Pro', 30000, 1000);

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

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

Lastly, you need to apply CSS like WebFont Loader:

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


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


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