How to build a font switcher

#1

I would like to add the possibiltiy choose between different fonts in tiddlywiki. My first usecase would be adding fonts for higher readability like Andika https://fonts.google.com/selection/embed Atkinson Hyperlegible https://fonts.google.com/specimen/Atkinson+Hyperlegible+Next

It would also be great to have a universal font-size menu that scales all fonts proportionally

#2

Could it be possible to store personal presets in the browser storage?

#3

I’ve made kind of a font switcher once: Aeolian — An Adaptive Typographic Scale for TW5

1 Like
#4

This is a great approach. I would like to modify it, so that only the font in $:/themes/tiddlywiki/vanilla/settings/fontfamily is downloaded.
So far I do not get this to work:

$:/tags/Stylesheet

<$list filter="[{$:/themes/tiddlywiki/vanilla/settings/fontfamily}search-replace[ ],[+]]" variable="font">
@import url('https://fonts.googleapis.com/css2?family=<<font>>:ital,wght@0,400;0,700;1,400;1,700&family=<<font>>:ital,wght@0,200..800;1,200..800&display=swap');
</$list>
#5

Nice!

I’ve just added a link to that page from my https://google-fonts.tiddlyhost.com resource.

(Your site is currently not set up to be loadable via iframe. If you’re up for making that settings switch via tiddlyhost, it would be fantastic to have it work that way too.)

1 Like
#6

Oops. I wasn’t even aware of that setting :slight_smile:
Now switched it on.

1 Like
#7

I don’t think there’s a simple way to go from TiddlyWiki’s font settings string to loading google fonts with a stylesheet alone.

Aeolian site has the fonts loaded at startup with $:/tags/RawMarkup tag, and that’s the approach at my google-fonts page as well.

Also, many of the strings in the font settings cascade are not google fonts, and not all google fonts will be set up to work with the syntax you’ve got there — which especially in the italics section seems to be tailored to variable font.

I don’t have much more time to troubleshoot now, but feel free to follow up.