fontsampler-js › lazyloading

A configurable standalone webfont type tester for displaying and manipulating sample text in the browser.

Lazyload demo

By default Fontsampler will load webfonts when they are selected. To preload all webfonts of a Fontsampler in the background you can use the lazyload option. This will load all fonts in the Fontsampler until all fonts are preloaded. If fonts are switched while preloading is still in progress, the selected font will be loaded first and then the rest of the fonts will be queued to preload.


<style type="text/css">
#demo.loading:after {
    background: limegreen;
    content: "Loading a font now";
    display: block;
}
#demo.preloading:after {
    background: orange;
    content: "Preloading fonts";
    display: block;
}
#demo:after {
    background: lightcyan;
    content: "Done preloading fonts"
    display: block;
}
</style>

<script>
var fonts = {
…
}
var options = {
    lazyload: true
}
new Fontsampler(document.getElementById("demo"), fonts, options).init()
</script>

Lazyloading all 18 styles of IBM Plex Sans in the background…