Lazy Load Fonts with IntersectionObserver API – FontJit

FontJit is a lightweight JavaScript utility that loads a font file for a specific DOM element when it enters the viewport.

The library handles font loading through the Intersection Observer API. It loads fonts only when their associated elements become visible.

This approach reduces initial page load times and prevents unnecessary network requests for fonts that users might never see.

How to use it:

1. Download the package and load the necessary modules:

import { fontJit } from './loadfont.js';

2. Set up lazy loading for your target elements:

// Target elements by CSS selector
fontJit('.custom-font-element');
// Or target a specific DOM element
const element = document.querySelector('#special-heading');
fontJit(element);

3. Add the required data- attributes to your HTML element. The data-fontjit-url is the path to your font file, and data-fontjit-name is the font-family name you’ll use in your CSS.

<div 
  class="custom-font-element" 
  data-fontjit-url="fonts/custom-font.woff2" 
  data-fontjit-name="CustomFont">
  Your custom text here
</div>

4. LoadFont only handles the loading of the font file; it doesn’t apply it. You still need to assign the font-family in your stylesheet as you normally would.

.custom-font-element {
  font-family: CustomFont, fallback-font, sans-serif;
  opacity: 0; /* Hide until font loads */
}
.custom-font-element[data-fontjit-status='loaded'] {
  opacity: 1; /* Show when loaded */
}
.custom-font-element[data-fontjit-status='error'] {
  opacity: 1; /* show error state */
}

5. Configure the IntersectionObserver:

lazyLoadFont('.custom-font-element',{
  // Intersection_Observer_API options here
});

6. You can also interact with FontJit in JavaScript by using promises:

// Using async/await
await fontJit('.boing')
console.log('All fonts loaded!')
// Using .then()
fontJit('.boing').then(() => {
  console.log('All fonts loaded!')
}).catch((error) => {
  console.error('Some fonts failed to load:', error)
})
// Load multiple fonts and wait for all
await Promise.all([
  fontJit('.boing'),
  fontJit('.prose'),
  fontJit('.code-example')
])
// Alternartively, check loading state using constants
const element = document.querySelector('.boing')
if (element.getAttribute('data-fontjit-status') === LoadingState.LOADED) {
  // Do something with the loaded font!
}

Changelog:

v1.1.0 (11/03/2025)

• API updated