Ask HN: Why can't I apply custom fonts to HN?
3 comments
Since this works
Their CSP has `default-src 'self'` and has no font-src, so font-src is 'self' too (it would need `data:` as well)
const style = document.createElement('style')
style.textContent = `* { font-family: Arial }`
document.head.appendChild(style)
Their CSP has `default-src 'self'` and has no font-src, so font-src is 'self' too (it would need `data:` as well)
A custom browser can set its own CSP, right?
CSP is inherently a client-side browser security feature, so yes.
const style = document.createElement('style'); style.textContent = ` @font-face { font-family: 'OpenDyslexic'; src: url('data:font/opentype;base64,...') format('opentype'); } * { font-family: 'OpenDyslexic', sans-serif !important; } `; document.head.appendChild(style);
it works everywhere. every link I click from this page, every website from the 90s I can find. everywhere except here!
On HN, the font-family CSS applies (I can see it in the inspector, elements show font-family: OpenDyslexic !important), but the actual rendered font falls back to sans-serif. The @font-face is in the DOM. The base64 is valid, the code works on other sites.
Tried: blob URLs instead of data URLs, MutationObserver to reapply, targeting specific elements (font, td, table), setTimeout delays. so much more. Nothing works on HN specifically.
Is there something about HN's markup or headers that would cause @font-face to fail silently? Has anyone dealt with this issue or know why it could be happening? content security policy & cors don’t seem at fault bc the base64 is in the dom. What might I be missing?