Ansi Figlet fonts not rendering properly in browser
LeonardoGentile opened this issue · comments
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?
I checked the font, and nothing jumps out as being wrong. It may be a rendering issue with the pre tag's default font. Try adding this style to the pre tag (or to the particular element that has the text):
font-family: Courier New;
Thanks, this seems to fix it!
Even tough I was using inconsolata from google fonts that is supposed to be monospaced
Good to hear! And yep, it looks like that font has a few characters that don't follow its standard width (ex: ▓ in particular).
Hello there,
sorry to comment on this closed issue, but im having problems rendering on mobile:
https://www.humansoflatecapitalism.com looks fine in all browsers and on most mobiles --- but in some the Banner totally glitches.
i tried using font-family:courier new; but hat no effect on my samsung A20.
Looks fine for me, though I have an iPhone. What does it look like? It sounds like it's most likely a font issue. Does "font-family:monospace" work?
hey there, first thanks for your great work :) im a hidden fan!
no.. , that didn't fix it either :/ It glitches pretty badly:
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.
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.
On the A20 its not a big difference to use chrome or that strange samsung internet thing, (i personaly default to chrome) - both render it terrible, SamsungInet a little worse. Same goes for a cheap Huawei p-something.
changing to a <div style="white-space: pre;"> made things even a little worse, as it now also glitched a tiny bit in the emulations i tested in chrome dev console.
i just got the idea to test your fonts generator on the A20 -- turns out almost all the fonts using ██╗ kind of symbols are totally glitched on my A20.
hmmmm...