Ansi Figlet fonts not rendering properly in browser

Hi, thank you very much for this!

I’m testing the Ansi Figlet fonts (for example “Electronic”) in the browser, if I print them in the console they appear good but within a <pre> block they are not properly rendered.

Is there any special css rules to apply for these cases?

[patorjk]

One other thought - it looks like Samsung phones have a “Samsung Browser”. I wonder if there could possibly be a bug in how this browser interprets the “pre” tag (which I noticed you were using). I would recommend downloading Chrome and seeing if the page correctly renders in Chrome on the Samsung A20. If so, another thing to try would be to change the pre tag to a div tag and manually set the styling to:

white-space: pre;

It may be that that browser just doesn’t recognize the pre tag.

[patorjk]

Are you familiar with Google Web Fonts? They have a number of monospaced fonts. You could include one of your page, and that would ensure whatever device your page is being rendered on would have the font. For example, to use Roboto Mono, you’d include the font in the page header:

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">

And then just set the styling:

font-family: 'Roboto Mono', monospace;

If there’s still a rendering problem, I would check and see if other FIGlet fonts render correctly on the Samsung A20. That would at least narrow down if the problem is due to the browser not properly rendering a monospaced font, or if there’s something up with the characters being used.