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>
<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;
}
DFL.detect() function accepts one or more arguments:
- font name or font names in array
- detection timeout length in ms (optional, default value: 15000)
- detection interval length in ms (optional, default value: 500)
CSS class names are generated by:
- add
dfl-prefix - convert font name to lowercase
- replace spaces with underscore