// Side-effect module: injects the font preconnect + stylesheet links into // as soon as the library is imported. Running at module-eval time // (not in useEffect) means the request goes out alongside the JS bundle, // well before React mounts — much faster than @import-from-CSS, which the // browser only discovers after parsing the stylesheet. // // The tags are idempotent: a `data-mp-fonts` marker prevents duplicates if // the library is imported from multiple entry points or hot-reloaded. const MARKER = 'data-mp-fonts' const HREF = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Roboto+Mono:wght@400&display=swap' function injectLink(attrs: Record) { const link = document.createElement('link') for (const [k, v] of Object.entries(attrs)) link.setAttribute(k, v) link.setAttribute(MARKER, '') document.head.appendChild(link) } if (typeof document !== 'undefined' && !document.querySelector(`link[${MARKER}]`)) { injectLink({ rel: 'preconnect', href: 'https://fonts.googleapis.com' }) injectLink({ rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }) injectLink({ rel: 'stylesheet', href: HREF }) } export {}