HTML5: Font failover to monospace?

Report · Jun 18, 2020

Hi there,

I'm using custom fonts, which I'm dynamically embedding, but I can't seem to force it to fall back to monospace on machines where the browser has been config'd to not allow font downloads? Anyone have any ideas for how to make this work? Am I just doing something stupid with my CSS?

Thanks in advance,

Eric.

Current font.js include script:

var styleNode           = document.createElement ("style");
styleNode.type          = "text/css";
styleNode.textContent   = "";
styleNode.textContent   = styleNode.textContent + "@font-face { font-family: 'Transponder AOE', monospace; src: url('./fonts/TRANA___.ttf'); }\n";
styleNode.textContent   = styleNode.textContent + "@font-face { font-family: 'Transponder Grid AOE', monospace; src: url('./fonts/TRANGA__.ttf'); }\n";
//console.log(styleNode.textContent);
document.head.appendChild (styleNode);