Using Custom Font in Tiddler Editor

[h0p3]

I use a stylesheet with a font embedded in it that looks like this:

@font-face { font-family:'customfont'; src: url('data:application/octet-stream;charset=utf-8;base64 ...

This is the only font I want in the wiki.  I've set 'Font Family', 'Code font family', and 'Editor font family' to customfont. This does not change the Tiddler Editor Font, although it changes everything else. How can I get tiddlywiki to use my custom font in the editor?

[Ton Gerner]

Hi,

Can you make a MTC (Minimal Test Case) e.g. at TiddlySpot so we can play with it?

Cheers,

Ton

[h0p3]

Of course! I have no idea why I didn't think to do that. Sorry. Here's a test case:

http://minimaltestcase.tiddlyspot.com/

Hopefully I'm just doing something obviously wrong which has a simple fix.

[Ton Gerner]

Hi,

I played with your MTC and found the following:

1) A 'normal' font (I tried Comic Sans MS so it was easy to see) works for editing
2) An embedded font (your Zing font) does not work for editing (as you already found)
2a) but when you switch off the editor toolbar, it works!

This means that an embedded font gives problems when combined with the editor with editor toolbar (note that in that case the editor is an iframe!).

The style for the editor is given in $:/themes/tiddlywiki/vanilla/base

.tc-tiddler-frame input.tc-edit-texteditor,
.tc-tiddler-frame textarea.tc-edit-texteditor,
.tc-tiddler-frame iframe.tc-edit-texteditor {
    padding: 3px 3px 3px 3px;
    border: 1px solid <<colour tiddler-editor-border>>;
    background-color: <<colour tiddler-editor-background>>;
    line-height: 1.3em;
    -webkit-appearance: none;
    font-family: {{$:/themes/tiddlywiki/vanilla/settings/editorfontfamily}};
}

The rendered version of $:/themes/tiddlywiki/vanilla/base shows your Zing font as font-family.
Prefixing these styles with html or html-body didn't help.

To be honest I do not have an explanation why it does not work with the iframe editor.
Maybe someone else can help you.

If you can live without the editor toolbar, it works as expected.
In that case (and for testing) you can use my Editor toolbar checkbox + preview button. Drag & drop the attached json file to your wiki.

Cheers,

Ton

[h0p3]

You are awesome, thank you! I use the hotkeys anyways, so losing the bar is a price I'm willing to pay. Thank you for toying with this and giving me a nifty hack to make it work.

[h0p3]

Actually, I can't use the hotkeys when I disable the bar. Is there a way around this? 

Also, is there a way to extra just the directory tree functionality from your left+top bar plugin? I want a site navigation tool with a tree structure. 

[Ton Gerner]

Hi,

Actually, I can't use the hotkeys when I disable the bar. Is there a way around this?

Yes, use the KeyboardSnippets plugin fom Danielo Rodriguez
 

Also, is there a way to extra just the directory tree functionality from your left+top bar plugin? I want a site navigation tool with a tree structure.

Have a look at my guide A top menu and left menu which describes in more detail the Top + left menu plugin.

Cheers,

Ton

My 'playground': http://tongerner.tiddlyspot.com/

[Jeremy Ruston]

Hi Ton

On 28 Jan 2018, at 19:06, Ton Gerner <ton.g...@gmail.com> wrote:

To be honest I do not have an explanation why it does not work with the iframe editor.
Maybe someone else can help you.

The reason that custom fonts doesn’t work with the editor toolbar is because of the way that it creates the textarea element within an embedded iframe (this is done so that the selection in the textarea isn’t lost when the user clicks on a toolbar button and the textarea loses focus).

The iframe doesn’t inherit any of the styles in the main document, so the code actually creates a hidden textarea and then reads back the styles, and then applies them to the textarea in the iframe. That means that any formatting applied to the textarea will be faithfully reproduced within the iframe. However, it only works for CSS properties applied directly to the textarea; it doesn’t transfer fonts, animations or other resources that can be defined in CSS.

(The code is here: https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/editor/engines/framed.js)

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. 

Best wishes

Jeremy

[Ton Gerner]

The reason that custom fonts doesn’t work with the editor toolbar is because of the way that it creates the textarea element within an embedded iframe (this is done so that the selection in the textarea isn’t lost when the user clicks on a toolbar button and the textarea loses focus).

The iframe doesn’t inherit any of the styles in the main document, so the code actually creates a hidden textarea and then reads back the styles, and then applies them to the textarea in the iframe. That means that any formatting applied to the textarea will be faithfully reproduced within the iframe. However, it only works for CSS properties applied directly to the textarea; it doesn’t transfer fonts, animations or other resources that can be defined in CSS.

Thanks for the explanation.

(The code is here: https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/editor/engines/framed.js)

I believe you, I am not a programmer ;-)

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.

 
h0p3 would be happy, but AFAIK an issue like this was never mentioned in the group before.

Cheers,

Ton

[TonyM]

Folks,

Surely we should ensure anything that may be styled, can be styled. I would like to see a way to introduce a style to any tiddlers elements via a field name. 

Also, I have used the style if tagged mechanism, but style if a fieldname exists would help as well.

Regards

Tony  

[Alfonso Arciniega]

Would someone please point me to a quick tutorial on how to embed a custom font in the TW the way has been shown here?

Thank you,

Alfonso

[Ton Gerner]

Hi Alfonso,

If I remember correctly the following comes from Jeremy's TalkyTalky which uses the Google font Lato:

It contains the follwing stylesheet (a tiddler tagged with $:/tags/Stylesheet):

\define register-font(family,title,style,weight)
@font-face {
  font-family: "$family$";
  font-style: $style$;
  font-weight: $weight$;
  src: url(<<datauri "$title$">>) format("woff");
}
\end
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline

/*
** Fonts
*/

<<register-font "Lato" "$:/_fonts/lato-black-webfont.woff" "normal" "900">>
<<register-font "Lato" "$:/_fonts/lato-blackitalic-webfont.woff" "italic" "900">>
<<register-font "Lato" "$:/_fonts/lato-bold-webfont.woff" "normal" "700">>
<<register-font "Lato" "$:/_fonts/lato-bolditalic-webfont.woff" "italic" "700">>
<<register-font "Lato" "$:/_fonts/lato-hairline-webfont.woff" "normal" "100">>
<<register-font "Lato" "$:/_fonts/lato-hairlineitalic-webfont.woff" "italic" "100">>
<<register-font "Lato" "$:/_fonts/lato-italic-webfont.woff" "italic" "400">>
<<register-font "Lato" "$:/_fonts/lato-light-webfont.woff" "normal" "300">>
<<register-font "Lato" "$:/_fonts/lato-lightitalic-webfont.woff" "italic" "300">>
<<register-font "Lato" "$:/_fonts/lato-regular-webfont.woff" "normal" "400">>

Hope that helps.

Cheers,

Ton

[Maurizio Torchio]

Hi everybody, any progress on this? (I really don't like see a different fontfamily when editing)

thank you so much for all the great work!

maurizio

[Charlie Veniot]

G'day,

If you are not averse to changing core TiddlyWiki templates, you could add a style at the top of the content in $:/core/ui/EditTemplate/body/editor.

See my screenshot below, in which I set the font to Brush Script MT cursive.

It would be good for more experienced TiddlyWiki users to chime in on any downsides to this approach.

(BTW: please ignore the goofy-looking "!!! EditTemplate body" ... that's me entering little breadcrumbs to figure out which core tiddler is which.)

[Maurizio Torchio]

thank you cj.v, but it didn't worked for me.
it assign the class bubba to the iframe (just as $:/themes/tiddlywiki/vanilla/settings/editorfontfamily does) but... nothing changes.

i suspect it has to do with what Jeremy wrote:

"The reason that custom fonts doesn’t work with the editor toolbar is because of the way that it creates the textarea element within an embedded iframe (this is done so that the selection in the textarea isn’t lost when the user clicks on a toolbar button and the textarea loses focus).

The iframe doesn’t inherit any of the styles in the main document, so the code actually creates a hidden textarea and then reads back the styles, and then applies them to the textarea in the iframe. That means that any formatting applied to the textarea will be faithfully reproduced within the iframe. However, it only works for CSS properties applied directly to the textarea; it doesn’t transfer fonts, animations or other resources that can be defined in CSS.

(The code is here: https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/editor/engines/framed.js)

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."

[Charlie Veniot]

I forgot to mention, you have to add that "bubba" class to the edit text widget.

As per the screenshot, the editor is showing that funky font.

However, it did strangely take half-a-minute or so for that font to take effect.

[Charlie Veniot]

Just to confirm, I went to tiddlywiki.com, edited (i.e. clicked the "edit" button) that core tiddler, (1) added the style lines above the edit widget, and (2) altered the class for the edit widget, adding bubba as the third class.

Works A-1 for me.

Maybe Brush Script MT cursive doesn't work with your web browser?  (Another screenshot for the proof in the pudding, with an obnoxious font size, below.)

It is the font in the editor that you want adjusted, right?

Total aside: "bubba" because it is easy for me to find and remember.  I'm a huge fan of the movie Forrest Gump, and really liked "Bubba" in that movie.

[Jeremy Ruston]

I think it's working for CJ because the "Brush Script MT" font is available by default in that browser, without needing to be defined by a font-face tag. That technique only works for built-in fonts because there's no way to inject the CSS font-face declaration into the iframe.

Best wishes

Jeremy

[Charlie Veniot]

Thanks for the info, Jeremy.  2-tier client server guy over here, so the innards of web browsers is foreign territory for this kid.

So whatever browser Maurizio is using, that approach I'm suggesting should work with some font-family available by default in whatever browser Maurizio is using, right?

[Maurizio Torchio]

thank you Charlie and Jeremy! yes: mine is a font-face.
the problem is: I love fonts! I use different fonts for different wiki, they embody the "soul" of the wiki (and I'd like to have the same font whether desktop or mobile, viewing or editing). that's why until now i used the edit widget for editing. but this means: no toolbar, and it can be annoying, especially on mobile.
anyhow: thanks again for this priceless tool!
m.

[Jeremy Ruston]

thank you Charlie and Jeremy! yes: mine is a font-face. 
the problem is: I love fonts! I use different fonts for different wiki, they embody the "soul" of the wiki (and I'd like to have the same font whether desktop or mobile, viewing or editing). that's why until now i used the edit widget for editing. but this means: no toolbar, and it can be annoying, especially on mobile. 
anyhow: thanks again for this priceless tool!
m. 

Have you tried using the CodeMirror plugin? It allows you to change the editor font family through $:/ControlPanel settings panel

Best wishes

Jeremy

-- 
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/8d9cfc25-648b-47a9-94c4-0c76e4cb2f4an%40googlegroups.com.

[Maurizio Torchio]

WOW! IT WORKS

I'm... elated.

[Jeremy Ruston]

Hi Maurizio,

That’s great to hear, I’m sorry I didn’t mention that option before.

Best wishes

Jeremy

PS - do send a screenshot of what you’ve ended up with, it might inspire others...

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/ef4285b2-9217-4c82-88b6-f93e01c44a23n%40googlegroups.com.

[Maurizio Torchio]

ok, this is a mobile screenshot. we are viewing a tiddler called "esistenza". (the only content of "esistenza" is macro I use to edit/view/abstract/annotate/reorder all the tiddler tagged with "esistenza"). the tiddler "attraversare-ponte" is now in edit mode (inside "esistenza"). and it displays the same wonderful Baskerville it shows in view mode!

the only problem is that now .tc-editor-toolbar {position: sticky; top: 0;} doesn't work anymore... I still haven't guessed why

[Charlie Veniot]

If of any use to anybody, here's how I've setup the editor to use a www.w3schools font face.  (I'm figuring TiddlyWiki could use a font face file sitting in the same file folder as the TiddlyWiki.)

[Maurizio Torchio]

Hi Charlie, using a local font file, i.e

@font-face {
font-family: 'CormorantGaramond';
font-style: normal;
font-weight: 400;
src: url(./tiddly/CormorantGaramond-Regular.ttf);
}

does not work (it works anywhere in the wiki, but not in the EditTemplate).
anyhow, even if it worked, I prefer to have a single file (that's why i use this method to embed my font-face: http://kookma.webfonts.tiddlyspot.com/)

summing up: CodeMirror plugin solves the problem (and of course adds other nice functionalities too) BUT the EditorToolbar does not stick anymore (to the top of the screen when scrolling). ie.

div.tc-editor-toolbar {
position: sticky;
top: 0;
}

does not work anymore.

(having a sticky toolbar is quite useful for me in mobile mode). (i tried to change to visible the overflow in CodeMirror to no avail).

thank you very much anyhow!

maurizio

[Maurizio Torchio]

To Whom It May Concern: it was just a silly z-index problem.

div.tc-editor-toolbar {
position: sticky;
top: 0px;
z-index:1;
}

now I can use embedded font-face in the editor (thanks to CodeMirror) AND have a sticky toolbar. (and I'm perfectly happy!)
: )

[Maurizio Torchio]

nope. I spoke too soon. CodeMirror manage badly text selection on touchscreens. looks like https://codemirror.net/6/ will fix this but until then... it's of no use for me.
: (

[Charlie Veniot]

Confirmation that this does indeed work with a local file.

(Well, unless there is something wonky going on.  Maybe somebody else can confirm with their own computer setup.  I am using a Chromebook.)

I went to Google Fonts and downloaded the Cormorant Garamond font family.  In the ZIP file, I copied the CormorantGaramond-Regular.ttf file to the same folder in which the TiddlyWiki file resides.

See screenshot below,  Note edits to core tiddler.  In particular, the "./" when specifying the font-face src and let's not forget (like I first did) to include that third class for the edit widget.

[Maurizio Torchio]

hmm.. I really do not understand. For me it does not work, neither in firefox on windows nor in Chrome on windows.

The font file is accessible (because it can be used in view mode). but in edit mode it does not work.

anyhow: thank you Charlie for all the time you dedicated to this topic!

mt

[Charlie Veniot]

 You have single quotes around the font-family name references in both "@font-face" and ".bubba" style sections.

I don't in my sample.

I have no idea if that makes a difference.

[Charlie Veniot]

I just checked.  Single quotes should make no difference.

[Charlie Veniot]

Yeah, if that font file is in the same file folder as your TiddlyWiki file, I don't know why things are working for me and not for you.

How do you open your TiddlyWiki file?  Right-click on it and choose open in the popup menu?

Bugs me when stuff works A-1 for me but not for somebody else.  I am two steps away from taking a cheap shot at Microsoft ...

[Maurizio Torchio]

same folder.

i open right clicking, double clicking, from the browser (file://...)

nothing works.

here is my empty wiki: https://drive.google.com/file/d/1bkC5viccXBaiN5tHtxpimuaZ6u9ymWZP/view?usp=sharing

[Charlie Veniot]

Oh, if you are keeping your TiddlyWiki instances on Google Drive and using TiddlyDrive, then this definitely won't work.

TiddlyDrive, in my kindergarten way of understanding it, totally upends the "URL", so that TiddlyWiki can't reference the file that is right there where the TiddlyWiki is.

The way around that, I think, is to keep the font file hosted on some site (I use neocities).

I'll give that a try in a little bit.

[Maurizio Torchio]

No, no, I keep everything local! I put it on drive just for you to download and double check if it works by you (after downloading CormorantUpright-Regular.ttf from Google, of course. I chose CormorantUpright in order to make the difference between where it works and where it doesn't very clear)

[Charlie Veniot]

As a sanity check, try this styling in that core tiddler:

<style>

@font-face {

  font-family: 'CormorantUpright';

  src: url(https://cjveniot.neocities.org/CormorantGaramond-SemiBoldItalic.ttf);

}

.myfont {

  font-family: 'CormorantUpright';

  font-size:2em;

  color:purple;

}

</style>

I've got your TiddlyWiki open, and the stuff above works for me A-1.

If that doesn't work on your computer, then I think I'll officially need to give up and stop harassing you with try this/that's.  (But it will continue to really bother me ...)