that would be a sensible way to do it, but turns out the browser leaks a lot of this information to the site because reasons

That is how it works, but that fall back tells the website what is and isn't available. Websites don't get a list provided by your browser- this website tests a big list of them:

/* Fonts — measured via width comparison; the device names what it carries */ const testFonts = ['Helvetica Neue','Georgia','Courier New','Comic Sans MS','Impact','Trebuchet MS','Palatino','Garamond','Futura','Gill Sans','Verdana','Tahoma','Lucida Console','Cambria','Consolas','Menlo','Monaco']; const installed = []; const probe = document.createElement('span'); probe.style.cssText = 'position:absolute;left:-9999px;font-size:72px;visibility:hidden'; probe.textContent = 'mmmmmmmmlli'; document.body.appendChild(probe); probe.style.fontFamily = 'monospace'; const baseW = probe.offsetWidth; testFonts.forEach(f => { probe.style.fontFamily = '"' + f + '",monospace'; if (probe.offsetWidth !== baseW) installed.push(f); }); document.body.removeChild(probe);

I use a custom font on one of my websites with the font files hosted on my server, which it offers to the browser, but it can be overridden by user accessibility settings