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
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