Bonbon

ᴮˡᵒᵒᵖ·

Yesterday, upon my hair,
perfectionist who's trying to
stop being such a perfectionisthello!!!!!!
finally gave 🍬self a faceI met a Spheal whose head was bare ona li @jan-PonponIts head was bare again today, is excited about bnuny horns rn
(send asks!)I wish, I wish it'd grow astray...🍬

story in   ↑↑↑ top ↑↑↑  link:
‘They're Made out of Meat’
by Terry Bisson, 1991
discord (a lot of bons)
bonbonbonbonbonbonbonbonbonbon

hellgnoll
@hellgnoll

Several fonts all seem to be loaded by the default site CSS. The default post font seems to be Atkinson Hyperlegible. Then we have:

  • Source Code Pro
  • League Mono
  • Papyrus

But what if you want more than that?


CSS lets you write fallback lists for font families in styles. This means that if a specific font cannot be found, it will select the next one. This is a great way to get certain vibes in posting without having to figure out how to upload fonts.

Some people may not know this, but CSS can tell a page to render text in any font that is installed in your system. This is really cool but also somewhat dangerous for portability, because between the major software vendors (Microsoft, Google, and Apple) the selection of fonts does not overlap much. Let alone Linux systems. This has resulted in many people simply using web fonts via central CDNs like Google Fonts.

However, as a web media artist who believes in minimizing bandwidth usage, I find this approach somewhat distasteful. When most systems come with dozens of fonts, why not just use what is available? This has led to me developing several of my own relatively reliable fallback lists.

My special blends of herbs and spices

This is a living list. I'll come back and edit this post as I create more fun combinations. Last update was July 6th, 2022.

font-family: Comic Sans, Comic Sans MS, Chalkboard SE, Comic Shanns, Comic Mono, Comic Neue, cursive;If you've seen my sans posting, you'll probably recognize this combination. Obviously, I use Comic Sans and Comic Sans MS as the default font for this. Apple has its own equivalent font which is very similar in style, called Chakboard SE, and when it comes down to it you can also use Comic Neue if you're desperate (although imo it tries too hard to be a snazzy font and loses the fun edge.) Linux users don't have many variable-width choices natively, (sans 🏴‍☠️,) but Comic Shanns and Comic Mono are good fixed-width alternatives..

font-family: 'Ac437 ACM VGA 8x16', 'Video Terminal Screen', 'Cascadia Mono', 'CaskaydiaCove Nerd Font', Consolas, Courier, monospace;My preferred monospace font for retro-posting is Ac437 ACM VGA 8x16 from The Ultimate Oldschool PC Font Pack, and if that doesn't work Video Terminal Screen, Cascadia Mono, CaskaydiaCove Nerd Font, or even Consolas or Courier. Worst case scenario, there is always just the default monospace font. This is the series of fallbacks I use on my site too. A lot of nerds have Nerd Fonts installed, and Windows users should all have Consolas and Courier.

If you have any fun combinations you use, or recommendations for fallbacks to add to the above, let me know!


You must log in to comment.

in reply to @hellgnoll's post:

This is helpful! Thanks!

Btw, while I'm not sure how many people use these (or how legal they actually are), Comic Shanns and Comic Mono are things Linux users can install. There's also a pack of Microsoft fonts I found in the AUR specifically to fix your posts.

from MDN:

You should always include at least one generic family name in a font-family list, since there's no guarantee that any given font is available. This lets the browser select an acceptable fallback font when necessary.

and the current style:

font-family: Comic Sans, Comic Sans MS, Chalkboard SE, Comic Shanns, Comic Mono, Comic Neue;

i'd suggest using this instead: font-family: Comic Sans, Comic Sans MS, Chalkboard SE, Comic Shanns, Comic Mono, Comic Neue, cursive;. it automatically falls back to any cursive font on your PC, and the default on windows for that is comic sans :)

This was super helpful for me!
For my needs, I replaced cursive with Papyrus as my fallback font.
For some reason, none of the Comic Sans style fonts show up on my phone (Chrome on Pixel 3), and cursive ends up rendering as pretty cursive text instead of as handwritten printed text, which was the opposite vibe I was going for, so it's handy to know that Papyrus is a default site font!