I'm building a mobile browser (webkit base) with accessibility features, including an option to override page fonts with OpenDyslexic. I have tried every permutation of:

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?

  const style = document.createElement('style')
  style.textContent = `* { font-family: Arial }`
  document.head.appendChild(style)