An Overview About System Font Stacks For Fast Loading Wikis

Tips & Tricks
#1

Modern Font Stacks

System font stack CSS organized by typeface classification for every modern OS

The fastest fonts available. No downloading, no layout shifts, no flashes — just instant renders.

image

image
image926×881 110 KB

I think it makes sense to have a closer look. If you are fine with the font families listed here, you will never need to load slow CSS web-fonts. … No tracking … Just fast :wink:

have fun!
mario

See: https://modernfontstacks.com/

To give a try

  • Download font-stacks.json (2.9 KB)
  • Drag and drop into https://tiddlywiki.com
  • Open Modern Font Stacks tiddler
  • From drop down select the font family you like
  • To return to Tiddlywiki default press “Factory Reset”

img_230_msedge

8 Likes
#2

How to use them in TiddlyWiki? Is there a demo wiki out there?

#3

The easiest way will be to use them in the ControlPanel → Appearence → Theme Tweaks
for the font-family settings.

If you prefer one system-font over the other, you only need to move it to the front of the string.

Important: Since those settings are for different OSes it’s important to use all of them in the theme-tweks. Similar to the settings we have at the moment. So users of a different OS as you use also have a nice setting.

It may be possible to create a plugin, which will allow users to switch between different presets.

If you mess it up, just delete the setting tiddler and the core setting will take over again.

#4

Is there a way to see on a Windows PC how the page will look on a Mac or an Android phone? Or do I need different tools for that?

#5

The only way I can think of is, to install the fonts if they are available and free to use with your OS. Most of them are probably bound to the OS itself, but actually I don’t know. I did not have a closer look.

I just got a link to the page and thought it would be a nice way to have some more styling possibilities without the fuzz of using web-fonts.

It’s important to not re-publish any font without the right license!

#6

Very nice! Thank you Mario!
I tried some of them. I used a small select widget to apply different font families!

#7

Note that there are several “generic” font-family values that work across all platforms: “serif”, “sans-serif”, “cursive”, “fantasy”, and “monospace”. Where appropriate, these font-family names should always be listed last in any of the $:/ControlPanel > Appearance > Theme Tweaks settings, so that if any of the platform-specific fonts are not present, the generic font-family values can be used as default “fallback” fonts.

One place where I prefer to specify ONLY a generic font-family value is in the “Editor font family” setting, for which I enter just “monospace” (as opposed to using a platform-specific font like “courier”). I find that this makes it easier to format and edit tiddler source wikitext content because the fixed-width font lets me apply consistent spacing for indentation of nested widget syntax, as well as aligning similar syntax that occurs across multiple lines of wikitext source.

2 Likes
#8

I revised the original post and added a tool to simply play with System Font Stacks. See the original post above.

1 Like
#9

Very nice! … I thought it would be nice to play with it. Now it’s even cooler :wink: Thanks a lot

1 Like