CSS in TiddlyTools/PrintTiddler and in export to HTML

#1

As you can see in the image at the bottom, TiddlyTools/PrintTiddler is not applying the Google fonts I use for text, headers, lists and links. Everything is turning into Arial. The same thing is happening when exporting statics, even though I never had any problem before.

Test it yourself here.

printtiddlercss
printtiddlercss1756×958 210 KB

#2

To be specific:

When I print to pdf using the Chrome print dialogue, everything works. The problem is that Chrome doesn’t give me the freedom to adjust what shows in the headers and footers. That is why the PrintTiddler appealed to me. I might be able to use Firefox for this. [edit: no header/footer flexibility in Firefox for Windows, either]

When I export to static HTML, the header fonts are okay, but are small. And the body font changes to Arial.

When I print using the PrintTiddler from TiddlyTools, the headers are the right size, but the fonts for both headers and body text are Arial.

#3

After some deep exploring of the inner guts of your TiddlyWiki, I found $:/.giffmex/fonts, which contains:

<link href="https://fonts.googleapis.com/css?family=Fira+Sans:200, 350,350i,700" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">

This tiddler is tagged with $:/tags/RawMarkup, which means that the “Fira Sans”, “Open Sans” and “Source San Pro” font definitions are being loaded at startup in the <head>...</head> section of your main Tiddlywiki file.

However, the TiddlyTools/PrintTiddler window is opened via the TWCore’s tm-new-window message which apparently outputs a completely separate HTML definition that does NOT include the content tagged with $:/tags/RawMarkup. Thus, your custom loaded fonts are not available to be rendered in the PrintTiddler window and the browser falls back to using the default “Arial” font.

I would presume that the TWCore static export process also does not include the $:/tags/RawMarkup content resulting in the same font rendering issue. Even so, I don’t see how having TiddlyTools/PrintTiddler installed in your TiddlyWiki could have ANY effect on the static export output.

I’ve not done much with custom font definitions in TiddlyWiki, but I recall that some others have done some work that incorporates TTF (TrueTypeFonts) or WOFF (Web Open Font Format) definitions directly in the TiddlyWiki file so that they are not being loaded in the HTML <head> section. Perhaps this would produce the results you want.

-e

#4

Also worth looking at is Printing Recommendations. I can’t tell if TT/PrintTiddler already incorporates this, not without research I don’t have time for right now, but that page shows how to create some very nice printed material.

#5

Hi yes these are good recommendations, but not relevant here.

#6

Thanks for taking the time, and for the explanation. Now I see why it won’t apply the font-families to PrintTiddler.

I wasn’t suggesting that PrintTiddler was messing up my static exports. I was just mentioning static exports as a similar problem that now does not apply font-family CSS. It used to work, with the Google font-families listed in a couple of these tiddlers:

$:/core/templates/exporters/StaticRiver
$:/core/templates/exporters/StaticRiver/Content
$:/core/templates/server/static.tiddler.html]
$:/core/templates/static-tiddler

Now it is not working. I will keep poking around…