Hi everyone
What is the CSS rule for the text field in edit mode? I want to change the font-family. Tried different options but it still shows up unchanged.
Try
.tc-tiddler-edit-frame .tc-edit-texteditor.tc-edit-texteditor-body { }
1 Like
You can set the font-family for the tiddler editor inputs using:
$:/ControlPanel > Appearance > ThemeTweaks (see Settings, Editor font family input)
You can enter one or more comma-separated font-family names (e.g., “Courier,monospace”). It will use the first font-family name that matches a font installed on your system.
-e
2 Likes
No, that didn’t do it. The title field shows as the font I want, but not the text field.
Hi Eric
I tried this, with and without quotes around the font family name, and with and without a semi-colon at the end. Nothing changed.
That’s interesting. It works just fine using TiddlyDesktop but not when using Firefox…
Edit: alright, this also works in Firefox:
.tc-tiddler-frame textarea.tc-edit-texteditor,
.tc-tiddler-frame iframe.tc-edit-texteditor {
background: #fcc;
color: #909;
font-family: "Times New Roman";
}
Weird. Does the value show up as you’d expect it in $:/themes/tiddlywiki/vanilla/settings/editorfontfamily? (Or the corresponding tiddler if you’re using a different theme?)
For what it’s worth, mine is set to:
"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace
… with quotation marks and commas rather than semicolons.
I’ve built up an editor toolbar button to toggle between monospaced and variable-spaced fonts dynamically. You’ll find the code in the attached JSON file.
toggle-mono.json (3.9 KB)
I didn’t publish it before because the setting seems bound to the vanilla theme ( $:/themes/tiddlywiki/vanilla/settings/editorfontfamily).
@DaveGifford, maybe you’re using a different theme in your wiki ?
Fred
2 Likes
To see if the selector is at all correct, i.e to ensure you’re actually targeting what you want, you can test if some other property, that unlikely is specified for the current elemen, works, e.g add
outline: 1px solid red;
and to see if it is a matter of specificity you can throw in !important to overrule other definitions, e.g
font-family: 'Brush Script MT' !important;
Here’s a combo of both ideas and the previously suggested targetting:
title: temp style test
tags: $:/tags/Stylesheet
text:
.tc-tiddler-edit-frame .tc-edit-texteditor.tc-edit-texteditor-body {
outline: 1px solid red;
font-family: 'Brush Script MT' !important;
}
This should hopefully make a nice mess.
@Brian_Radspinner On my file it changes everything but the font-family. It appears as Arial. But I combed through my Stylesheets looking for Arial that could be messing things up, to no avail.
@Secret-HQ Yes my font shows up correctly in that tiddler.
@tw-FRed No, no different theme.
@twMat That works, and it appears as Brush Script, but changing the font in that temp test tiddler to “Source Sans Pro” makes the font go back to looking like Arial. The font looks notably different in edit than it does anywhere else in the wiki:
OK, so you’re trying to use a font that is not accepted by the browser. There are a zillion fonts but the browsers can’t show them all so they fall back on some defaults. Here’s a list of web safe fonts. (Ironiaclly, the very font I opted for, i.e “Brush script” is not correctly shown in their demo! I use Brave browser)
Including special fonts is standard procedure for web pages but TW is a bit different since it is only one document, where you can’t load libraries etc. But I’m pretty sure there are solutions if you dig around or if anyone can comment in this thread.
Not really. …It may have been someone else.
I’m using the Theme-tweaks settings mentioned already and just copy paste the content of the Code font family over to the “Editor font family” … That works for me, to get a monotype font in the editor.
On Windows it seems to use Consolas, and on Ubuntu it seems to use Liberation Mono, which are both fonts that I actually like. So I don’t have a need to change much.
Per here: Changing editor font size
This works for me using Firefox on Windows and Linux.
.tc-edit-texteditor-body {
font-size: 12px;
font-family: monospace;
}
Hm… I’m almost sure I’ve seen it on one of your sites. What are your sites called - wikilabs? tiddlylabs? (I’m trying to search but don’t find it just now). It was a long time ago I saw it but I believe it showed how to use google fonts or something like that.
@twMat you might be referring to this GG thread:
Google Fonts for TW5
https://groups.google.com/g/tiddlywiki/c/mnC7gOHzv0Y
or maybe Using a Custom Font | tb5 - tobias beer
http://tobibeer.github.io/tb5/#Using%20%20A%20Custom%20Font
…that came from the thread: How to embed a font
1 Like
Note that as presented in the Control Panel, the “Editor font family” can only be a web-safe font, i.e., one that is already known to the browser. It can’t be a custom font specified in your wiki’s stylesheet because the tiddler textarea is rendered using an iframe that injects an entirely new HTML document into the page structure, absent the head tags used for the wiki as a whole.
Because I was very interested in having more control over the editor font, I reviewed this thread carefully. I think the best solution for my use-case would be, as Jeremy suggests:
We could update things so that special stylesheets identified by a new system tag such as $:/tags/Stylesheet/FramedEditor would be automatically inserted within the iframe.
I would very much be in favor of this! I think being able to finesse the editing view is crucial for some people to feel like the wiki is truly their own. It would give the feel of WYSIWYG editing, which is nice in theory, but in practice tends to be a bit limiting.
I also think that an explanatory note with a link to the standard web safe fonts in association with the Editor font family field in the Control Panel would be helpful as it puzzled me for some time as to why my changes were not reflected.
In the meantime, I have resorted to hacking $:/core/modules/editor/engines/framed.js to add a link to my main CSS font file to the head of the injected iframe document. I think of this as a temporary solution, since it alters the core and creates a call to an outside resource for every tiddler in edit mode. But I am enjoying it, as my custom font stack is quite important to me. 
That is Chaparral, by Carol Twombly.
p.s. Regarding the subject of having custom fonts in TW as a whole, I embed my fonts “whole cloth” into a css file by converting them to base64 strings. Again, a bit resource-intensive but there are no other dependencies and it seems to work well with TW.
3 Likes