Font loader

Lazy load fonts using the FontFace API and IntersectionObserver, without any dependencies. Font loader is open source and is available here: Font loader on Github.

How it works

Fonts are registered on demand via the FontFace API — no CSS @font-face declarations needed. Font URLs and metadata are provided via a JSON <script> element in the page. Fountain streamlines the workflow: the default template shows the first three test fonts loaded eagerly, with the remaining fonts loaded lazily.

• Eager elements load their font immediately on init
• Lazy elements load their font when scrolled into view via IntersectionObserver
• HTML classes are added after the font loads so CSS can react to them
• For eager fonts, pair with <link rel="preload"> so the browser fetches the file before the script runs:

Also: JSON and fonts