A web page that tells you what your browser gave away the moment you arrived. No login, no form, no permission. Most pages do this. None of them tell you.
I don’t anything about web development, so I assumed websites told browsers: ‘Hey type this text in X font.’ If the machine didn’t have that font the browser would fall back to another font.
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
I don’t anything about web development, so I assumed websites told browsers: ‘Hey type this text in X font.’ If the machine didn’t have that font the browser would fall back to another font.
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 would be a sensible way to do it, but turns out the browser leaks a lot of this information to the site because reasons