Lazy Load Fonts with IntersectionObserver API – LoadFont.js

LoadFont 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 { lazyLoadFont, loadFont } from './loadfont.js';

2. Set up lazy loading for your target elements:

// Target elements by CSS selector
lazyLoadFont('.custom-font-element');

// Or target a specific DOM element
const element = document.querySelector('#special-heading');
lazyLoadFont(element);

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

<div 
  class="custom-font-element" 
  data-lf-url="fonts/custom-font.woff2" 
  data-lf-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-lf-status='2'] {
  opacity: 1; /* Show when loaded */
}

5. Configure the IntersectionObserver:

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

The post Lazy Load Fonts with IntersectionObserver API – LoadFont.js appeared first on CSS Script.