font-loader.min.js

/**
 * Lazy load fonts using the FontFace API and IntersectionObserver.
 * @author Andreas Nymark <andreas@nymark.co>
 * @license MIT
 * @version 1.2.0
 * @link https://github.com/andreasnymark/font-loader
 */export const config=Object.assign({eagerSelector:'[data-font-load="eager"]',lazySelector:'[data-font-load="lazy"]',metadataSelector:"#font-metadata",fontsLoadedClass:"fonts-loaded",fontLoadedClass:"font-loaded",rootMargin:"300px",threshold:0,applyFont:!1},window.FontLoaderConfig||{});const n=document.querySelector(config.metadataSelector);n||console.warn("font-metadata element not found, font loading disabled");let s={};if(n)try{s=JSON.parse(n.textContent)}catch(t){console.error("Failed to parse font metadata:",t)}const r=new Map;export function loadFont(t){if(r.has(t))return r.get(t);const e=s[t];if(!e)return console.warn("Font not found:",t),Promise.resolve();const o=new FontFace(e.family,`url(${e.url})`,{weight:e.weight||"normal",style:e.style||"normal",stretch:e.stretch||"normal"}).load().then(a=>{document.fonts.add(a)}).catch(a=>{console.error("Failed to load font:",e.name,a)});return r.set(t,o),o}const l=new IntersectionObserver(t=>{t.forEach(e=>{if(e.isIntersecting){const o=e.target,a=o.dataset.fontFamily;a&&loadFont(a).then(()=>{o.classList.add(config.fontLoadedClass),config.applyFont&&(o.style.fontFamily=`'${a}'`)}),l.unobserve(o)}})},{rootMargin:config.rootMargin,threshold:config.threshold});function d(){document.querySelectorAll(config.eagerSelector).forEach(t=>{const e=t.dataset.fontFamily;e&&loadFont(e).then(()=>{t.classList.add(config.fontsLoadedClass),config.applyFont&&(t.style.fontFamily=`'${e}'`)})}),document.querySelectorAll(config.lazySelector).forEach(t=>{l.observe(t)})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",d):d();