Embedding a font into Tiddlywiki

Yes, clearly the process is fairly brittle.

For what it’s worth, I recall from various experiments with google fonts that font names that end in numerals sometimes misbehave (and I see that this might apply to your linja-pona-49).

I don’t recall exactly how the problem manifested, or what steps I took to manage a workaround… But you might see what happens if you simply ensure that your font names are alpha-only.

Wishing you the best with your project…

1 Like

The “font awesome” plugin found somewhere in the community does install fonts and other css so I may be an example of a working implementation.

1 Like

Absolutely! :slightly_smiling_face:

https://thediveo.github.io/TW5FontAwesome/output/fontawesome.html

Fred

1 Like

So when all is said and done, there are two things that worked well

– using the Fontsquirrel generator to create a bit of CSS which contains the entire font, in base64 format. (go to Expert, click on base64 encode, you may or may not want to uncheck all the things which “fix” your font, I don’t know) – the resulting zip file you get will include a “stylesheet.css” file. You can paste the contents of that into a tiddler with the $:/tags/Stylesheet tag. (Or just drag and drop it and add the tag to the resulting imported tiddler.) It will make that font-face available for use in stylesheets. Just read the css to see what the font-face is!

– Do like I was trying to do first of all and it several stumbling blocks: instead of embedding the font in your stylesheet tiddler in base64 directly, you can drag and drop the font into its own tiddler and then import it into your stylesheet using the <<datauri >> macro. The reason I found this tricky is that for the macro to work, you need to NOT designate your stylesheet tiddler as of type text/css because text/css tiddlers do not get macro expansion. That kept it from working for me for a long time. The other issue is that the tiddler that’s getting pulled in via the macro has to be recognized as binary content by tiddlywiki! Or else it won’t work with that macro. Tiddldywiki seemed to recognize woff files as binary but not otf files, so things only started working for me there when I used woff files. (You can tell it’s recognizing something as binary because when you look at the tiddler there’s a yellow box instead of a bunch of gibberish text.)

I don’t see a whole lot of benefit to that way at this point, unless for some reason you’d much rather have the actual font sitting in a binary tiddler than a base64 representation of it in a textual tiddler. Maybe there are good reasons for doing that.

Anyway, just leaving my final “what worked for me and why” notes to add to / affirm all the other good info here. Thanks all!

3 Likes

mi kama sona e ni: ilo li ken kin!

It turns out browsers can do it! :slight_smile:

1 Like

tiddlywiki font geist plugin
This should be a relatively standard font plug-in (in my opinion) and is worth a reference.

3 Likes

I’m confused. This post was not rendering in toki pona font for me at all (just ordinary latin non-ligature characters, on both Chrome and Firefox). Nor does the post #25 later in this thread by @edheil

Maybe it shows up looking more toki-pona-like for you because of features on your computer or browser?

That’s just toki pona written in the Latin alphabet with no special fonts.

ah, i did not mean “the font used in this reply here”, i meant “the font @edheil was trying to embed into their TW”. toki pona can be written with Latin script too (and usually is in online spaces) :slight_smile:

2 Likes

I have heard no discussion here about the fonts named here Control Panel > Appearance > Theme Tweaks > Settings/font family

This should be relevant to the original Topic.