Embedding a font into Tiddlywiki

[edheil]

Hullo,

I’ve been hoping to make a special font (“linja pona”, used for writing in the constructed language “toki pona”) available in a tiddlywiki.

I tried to copy the technique here, which explains how the “Arvo” font works in the Starlight theme –

[tw5] Re: [TW5] How to embed a font (using @font-face and data-url)

I encode it manually instead: download the font file, for example, FiraCode-VF.woff2 base64 '/Users/linonetwo/Downloads/Fira_Code_v6.2/woff2/FiraCode-VF.woff2' -o '/Users/linonetwo/Downloads/Fira_Code_v6.2/woff2/FiraCode-VF.woff2.base64.txt' as said in css - Converting and rendering web fonts to base64 - keep original look - Stack Overflow put base64 string in the ` src: url(‘data:@file/octet-stream;base64,yourbase64’); as said in html - Base64 encoded OpenType font-face using data URI - …

but I’m not getting it working. I’ve dragged and dropped an otf file (linja-pona-4.2.otf) into the wiki, changed its mime-type to “font/otf”, and made a stylesheet tiddler looking like

@font-face {
	font-family: "linja pona";
	src: 
       local("linja pona"),  url(<<datauri "linja-pona-4.2.otf">>)  format("woff");
}

.pona {
  font-family: "linja lipamanka";
}

If I enclose a paragraph with

@@.pona
@@

it does change font! But it changes it to “Nimbus Roman” (which I learned from looking in the browser inspector)… as if it can’t actually find linja pona.

Did I miss a step? Is there some other magic I need to do to import the file correctly?

Thanks for any help!

[CodaCoder]

I don’t know that technique. Here is how I “embed” fonts:

Create a tiddler (the title does not matter).
Add the tag $:/tags/RawMarkup.
In the text body add a <link...> element something like this:

<link href="https://fonts.googleapis.com/css?family=Rokkitt" rel="stylesheet">

Obviously, replace that URL with the URL to your font, then save and reload your TiddlyWiki.

I did a quick search and I found this:
https://davidar.github.io/linja-pona/stylesheet.css
but I don’t know if that’s the correct reference.

[TW_Tones]

If I recall correctly using this method demands you are online but you can copy what you find at the end of your link and bring it into tiddlywiki perhaps with a stylesheet tag.

[Scribs]

toki a! mi jan pi toki pona li pilin pona mute tan lon sina mi la toki pona en ilo Tiddlywiki li kulupu pona!
sina wile kepeken linja pona la ni li suli kin: ilo Browser o ken e nasin pi wan sitelen. mi sona ala e ken pi ilo ale. sina wile pali ante tawa ken ni anu seme?

---

english:
hi, i think toki pona and TW5 go well together!
this font makes heavy use of the ligature feature of fonts to combine letters into single glyph “word” characters. is this possible in all/any browsers? would extra action be needed to enable this?

[Scott_Sauyet]

@edheil

I’ve dragged and dropped an otf file (linja-pona-4.2.otf) into the wiki, changed its mime-type to “font/otf”, and made a stylesheet tiddler looking like

@font-face {
	font-family: "linja pona";
	src: 
       local("linja pona"),  url(<<datauri "linja-pona-4.2.otf">>)  format("woff");
}

Is that format("woff") the issue? Should it be – and I’m just guessing! – format("otf")?

I don’t know much about fonts, and my last attempt ended in failure, working only in my Linux dev environment, but not on Windows. So don’t take my word for anything here!

[Springer]

@edheil

I tried to copy the technique here, which explains how the “Arvo” font works in the Starlight theme –

Since that technique was for a webfont, and you’re wanting to incorporate the font file, I don’t think it’s a good model.

(Also, I notice that your font isn’t being named consistently in the code you quoted — in addition to the format discrepancy noted by @Scott_Sauyet.)

I do not know how to make tiddlywiki recognize a font that has been uploaded as a tiddler within the wiki itself. (Perhaps .otf would need to be one of the recognized tiddler types, like image/png etc., I suspect? Edit: As you already seem to have noticed, you can specify font/otf as a tiddler type!)

EDIT: SEE NEXT POST, which includes demo of fully-embedded font (saved into and accessed from within tiddlywiki).

[resuming my original response:] … However, you can include a link to a font that’s hosted anywhere you like, probably including your local filesystem if you’re working offline.

At my google-fonts demo site, I’ve got a tiddler showing how I use a font that lives in my personal dropbox directory. (It’s a compact display font purchased years ago, so I hope there are no copyright complaints.)

Google Fonts for TiddlyWiki

You should be able to use a local url that points to something on your own filesystem, if your tiddlywiki is all offline. (I’m working mostly with tiddlyhost, so I never work with local directories.)

Cheers, let us know how it works!

[Springer]

Success! — skip to post #15 Embedding a font into Tiddlywiki - #15 by Springer

What I initially thought was success (at embedding a font) was probably confounded by the fact that this font is available on my local OS.

Still…

Here’s the overall site with TiddlyWiki font techniques (Now with open graph tags, hooray!) for your reference:

https://google-fonts.tiddlyhost.com/#

[Scott_Sauyet]

@Springer

I’m able to upload a font and serve it right from within tiddlywiki , using the type font/otf

Could you show a screenshot of how it’s working for you? This is what I see in Chrome on Windows:

This is not your expected appearance, correct? I’ll check from Linux this evening. Are you working on a Mac, by chance?

[Springer]

Ah, thanks! I realize the problem is that the font is active on my own desktop. I thought TiddlyWiki was working with the embedded font file, but I neglected to consider this possibility and test how it works with a font that’s not on my OS. D’oh.

[Scott_Sauyet]

There may be more to it than that. When I tried this five years ago, I had Linux users report success, and Windows users report failure. But there were only a few of each, so it could be coincidence.

[Scott_Sauyet]

Yeah, I just tried my old wiki with the supposedly-embedded font in it on my work Windows box, and it failed. Then I installed the font on Windows and it worked fine. I really would like to get this working. Hmm.

[CodaCoder]

That’s an impressive amount of font work in the wiki that @Springer posted, but really, my method (up thread) is simple and has been working for me “forever”.

Yeah, I know, you want to truly embed… well, that’s okay – if you can get it to work.

Or did I miss something?

[Springer]

Indeed, I have only ever worked with hosted fonts such as google fonts (and fonts available on my local machine). I imagine for something that is absolutely intrinsic to the purpose of the wiki (which may be the case for OP), it would be ideal to find a way to have the font right there within the single-file TiddlyWiki, thus being confident that the wiki can’t be cut off from its associated font file (even if emailed to someone, opened on another machine without internet, etc.)…

Alas, I’m still not getting anything like a truly embedded font to work properly, even after trying a run through the recipe posted here: [tw] [TW5] How to embed a font (using @font-face and data-url)

I’m giving up on this rabbit-hole for now (EDIT: That was a lie.). I continue to hope that it is possible to embed a font within a tiddler (and actually get css to access it for display within the same wiki), simply because others claim to have done so… but it’s not easy!

[Scott_Sauyet]

@Springer

I continue to hope that it is possible to embed a font within a tiddler (and actually get css to access it for display within the same wiki), simply because others claim to have done so… but it’s not easy!

Same here. I tried and gave up once, and only today realized why it seemed to work for me and not others. I may look again soon, but it has been frustrating.

[Springer]

CORRECTION:

I had not actually followed the recipe all the way.

The recipe at

https://tiddlywiki.narkive.com/bS0CgWKQ/tw-tw5-how-to-embed-a-font-using-font-face-and-data-url

DOES work, if you follow all the steps.

Here’s my working demo. Having uninstalled my local font file, I can confirm that it’s not for the wrong reasons that it’s displaying properly now.

https://google-fonts.tiddlyhost.com/#font-uploaded-here

[Springer]

That one last push — the one after I claimed to have given up! — yielded results. A screenshot documentation of success feels in order:

[tw-FRed]

Hi,

Here’s what I’ve been using successfully on an offline wiki where I can’t install the font on the system:

Font Manager

To convert the ttf/woff/woff2 file to base64 I use Webfont Generator or Woff2Base.

I then paste the resulting base64 code into a new tiddler tagged $:/tags/Stylesheet and use it in another stylesheet like any other font.

Here is an example. Warning: it will redefine every title font in your wiki, try it on tiddlywiki.com first!
roboto-titles.json (29.1 KB)

Test tiddler:

! Title1

!! Title2

Normal text...

Fred

[edheil]

Wow, thanks everyone for the ideas and advice! I found a way to do it through experimentation, based on the existing embedding of the “Arvo” font in the default tiddlywiki. Here are the things I needed to do:

• USE A WOFF, NOT AN OTF OR A TTF
• At least one woff I tried mysteriously didn’t work, but others did, since I’d converted that one with an online service I assume it converted wrong or badly or something
• In order for the <<data-uri >> macro to work, your stylesheet tiddler must not have the css content type! A blank content type works.

Here is the scratchpad where I eventually I got two fonts to work, including the hieroglyphic one I wanted to use. https://scrub-cushion-54.tiddlyhost.com/

Sounds like there are some other resources I could have used but I wasn’t checking my mail while I was figuring this out so I didn’t find out about them till I’d already figured out how to do it this way

[Springer]

Right now the linja-pona is showing properly for me, but not the linja-pona-49

[edheil]

Yeah, I just now deleted the linja-pona-49. I think that was a failed otf->woff conversion or something.