Setting Fonts in TiddlyWiki

[TonyM]

Folks,

I have always accepted and being happy with the default fonts used in tiddlywiki. However as a result of issues when printing tiddlers to PDF I am interested at looking to change the font settings. I have not found any instructions however on changing them except installing google and fontawesome.

Can anyone lead me towards learning how these are managed in TiddlyWiki such that I could tweak them and try others? Or even introduce a higher quality scalable font to a single file wiki.

One particular problem I am facing is with "ll" (Two lower case L's) which after printing to PDF sometimes appears to be bold, and at other times not. Other letters also sometimes look bold at different zoom levels. I am not talking about extremes here, I would like even a standard zoom level not to have artifacts.

Thanks in Advance

Tony

[TonyM]

More Info

Using Both the Chrome Inspector, and FireFox Inspector/computed Both report the key font in use to be Verdana, sans-serif of size 15px smaller 14/12px and larger 22.5

I have also changed the default browser san-serif font in chrome but inspect still report Verdana

Example of problem 

TiddlyWiki Appearance, Theme Tweaks Font Family says; 

-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

I assume If I change Font size for tiddler body I need to change Line Height for Tiddler Body.

I am not sure how px sizes replates to print size.

Regards

Tony

[PMario]

Hi Tony,

If printer font settings works well is highly dependent on the OS you use and which fonts your printer can natively use. If a printer can't handle the font you use the page will be sent as pixel graphic, which is much slower.

Similar things happen if you print to PDF. It depends on the software settings of your PDF writer, but you should have much more possibilities.

Depending on your setting, 1 page of pure text can lead to several MByte of PDF size if it is printed as a bitmap. ... If the font you want to use, is installed on your system, you can probably set your writer to "include font" into PDF, which should make the file much smaller and the text search in PDF should work. Print quality should be better too.

Some writers can also do "tree shaking" for characters used in the text. They will only include font-definitions for characters used. If you use several different fonts, this can make an additional impact on PDF size.

So I think it's important to have a closer look at your complete setup, instead of changing TW settings alone.

Including fonts into TW could be seen as a "redistribution" which is bound to the font-license. So be careful here! That may also be true for publishing content as PDF. Be sure you know the font licensing, if money is involved.

have fun!

mario

[TonyM]

Mario,

Thanks for putting that eloquently. Perhaps I could have been a little more specific. I actually have a similarly deep understanding of the Role of fonts and print drivers etc.. as you do.

• Fortunately for me I use windows/chrome and so do my clients.
• Regardless of Default TiddlyWiki fonts, Both Chrome and FireFox result in the browser inspect as using verdana (Proven with inspect tools). I don't see how to change or influence this. This always ends up in the Print to PDF.
• As far as I can see, I am just not happy with Verdana and its crappy scaling or block like lowercase L (And my client hates it), any San-serif may be better.
• I have never tried to dial up the use of alternate fonts in a browser (only native applications)  and do not know how to get both FireFox and Chrome and ANY of three PDF printers to use a font other than the mysterious Verdana, unless I configure the CSS.
• The PDF Files may be sent by email but I am not concerned with file size as its mostly text, just Verdana font.

Thanks for your response

Tony

[TiddlyTweeter]

TonyM wrote ...

However as a result of issues when printing tiddlers to PDF I am interested at looking to change the font settings. 

PMario wrote ...

... have a closer look at your complete setup ...

Two issues arising ...

1 - whether you interested local or what you put on www?

2 - PMarios point about wrapping fonts in ... 

Including fonts into TW could be seen as a "redistribution" which is bound to the font-license. 

Personally I don't see any issue on local PC. You just match actual font cascade in TW to fonts you physically have.

OR get highly specific on a @media print directive to them for print output.

For specific TW online you may need to embed fonts to ensure display. Bit rare?

I'm still a bit unclear what the issue is?

Best wishes

TT

 

 

[TonyM]

Folks

Thanks. But I do not know how to change the font, especially the one I did not select.

This demonstrates my problem but not exactly, and with a different app. http://support.serif.com/kb/a289/troubleshooting-when-i-publish-to-pdf-l-lower-case.aspx

In fact Dr Google reports this issue for dozens of apps and PDF printers non of which seem to apply to me. Which means this is systemic not specific.

I do not have a obvious method to stop it using outline fonts, which I would have expected were better at this.

Any more ideas, please let me know.

Tony

[Ste Wilson]

I think my instructions are linked on daves amazing tiddlywiki stuff list :)

http://stephenteachertests.tiddlyspot.com/#Font

[TiddlyTweeter]

TonyM wrote:

... as a result of issues when printing tiddlers to PDF I am interested at looking to change the font settings.

Is this a TW issue or a PDF issue?

After the foregoing discussion I'm beginning to think it may be a PDF issue.

TT

[Chuck R.]

> One particular problem I am facing is with "ll" (Two lower case L's) which after printing to PDF sometimes appears to be bold, and at other times not. Other letters also sometimes look bold at different zoom levels.

Hi, I work for a printer and use PDFs a lot. It sounds like the issues you have is when you VIEW the PDF on the screen. The strange bolding issues are merely screen artifacts. What you should look at is the print quality of fonts when you actually print to the printer. There is nothing we can do about this screen issue when you view the PDF on the screen. 

Or you can try to update your video driver. That's all I can think of.

[PMario]

On Thursday, January 16, 2020 at 12:08:37 PM UTC+1, TonyM wrote:

• Regardless of Default TiddlyWiki fonts, Both Chrome and FireFox result in the browser inspect as using verdana (Proven with inspect tools). I don't see how to change or influence this. This always ends up in the Print to PDF.

And that's the issue I see. On a modern windows version Win10 the first font that is detected should be "Segue UI" which should be used. On my system it is the first one it uses for plain text.

For code blocks it finds "Consolas". ...

Testing with Chrome an FF on my system it uses "Rendered Font": Segue UI ... That's strange.

So on your system there must be a setting that changes something to Verdana, which is not even listed in the default TW settings. ... So does any of your stylesheets change the base font?

-mario

[PMario]

Hi,

If you inspect the font on tiddlywiki.com .. Do you also get Verdana?

-m

[TiddlyTweeter]

Missing in this discussion is that *PDF* is a very exact tool that can itself determine what fonts are used!

ALSO embedding of fonts in PDF depends on the license for a font.

Here gives some basics: https://helpx.adobe.com/acrobat/using/pdf-fonts.html

Best wishes

TT

[TonyM]

Mario,

On TiddlyWiki.com using Chrome is reporting the font as the string entered in theme tweeks

-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

Regards

Tony

[TonyM]

Mario

The windows seeting sets other fonts, I cant see a different choice or even Verdana in the browsers and in TiddlyWiki searching for "font" in advanced search returns only one result. 

Tony

[TonyM]

Chuck

The problem is this problem is occuring on any computer that views my PDF, weather the PDF is created with Foxit or Microsoft. 

It has being reported that it prints well, unfortunately as we go paperless the PDF is the end result and the client claims its unprofessional and I have to agree. I think need a way to choose the font then perhaps another font will be more professional.

However I will consider video drivers if I cant get anywhere else.

Thanks

Tony

[TonyM]

TT,

It certainly seems like a PDF issue, but this issue occurs when printing to PDF with two methods, in both FireFox and Chrome and on multiple Windows Machines, it occurs when viewing via Foxit reader or Adobe DC reader. However the inspect is reporting verdana I did not set, but not currently on TiddlyWiki.com, which uses the string provided in tiddlywiki.

Regards

Tony

[TonyM]

Ste,

Thanks, I will try adopting the alternate fonts.

Tony

[TonyM]

Thanks all for you help,

I am off to a medical appointment but aim to resolve this today. I will report back.

Anymore ideas/knowledge appreciated.

Tony

On Thursday, January 16, 2020 at 3:51:30 PM UTC+11, TonyM wrote:

[PMario]

On Thursday, January 16, 2020 at 10:30:20 PM UTC+1, TonyM wrote:

Mario,

On TiddlyWiki.com using Chrome is reporting the font as the string entered in theme tweeks

-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

If you scroll down in the "Computed" tab you should see the font used, if you inspect some text.

-m

[TonyM]

Mario et al,

I Found the problem. Thanks all for leading me to the answer.

Perhaps it is only my lesson to learn, but the problem was a Tiddler I had created some time ago.

;Found $:/PSaT/w3.css

tagged $:/tags/RawMarkup then removed tag, saved. reloaded

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

So the raw markup tiddler was pulling in extra CSS that was not evident in the stylesheets, on stopping this the problem went away.

Lessons

1. Be very careful with raw markup because it can pull in content and CSS not findable within tiddlywiki.
2. When experimenting always keep track and reverse where possible changes you do NOT need.
3. w3.css introduces an ugly Verdana font.

Can someone please mark this as completed. 

Small notes

• The "Computed" tab in FireFox is "Styles" in Chrome inspector.

Eternally grateful, Tony