[tw5] Re: [tw] Using Custom Font in Tiddler Editor

[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) 

Il giorno venerdì 3 dicembre 2021 alle 18:51:17 UTC+1 cj.v...@gmail.com ha 
scritto:

> 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.
>
> On Friday, December 3, 2021 at 1:31:34 PM UTC-4 torc...@gmail.com wrote:
>
>> 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
>>
>> Il giorno venerdì 3 dicembre 2021 alle 17:40:58 UTC+1 cj.v...@gmail.com 
>> ha scritto:
>>
>>> 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 ...
>>>
>>> On Friday, December 3, 2021 at 12:37:07 PM UTC-4 Charlie Veniot wrote:
>>>
 I just checked.  Single quotes should make no difference.

 On Friday, December 3, 2021 at 12:35:39 PM UTC-4 Charlie Veniot wrote:

>  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.
>
> On Friday, December 3, 2021 at 11:58:38 AM UTC-4 torc...@gmail.com 
> wrote:
>
>> 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
>>
>> Il giorno venerdì 3 dicembre 2021 alle 16:21:51 UTC+1 
>> cj.v...@gmail.com ha scritto:
>>
>>> *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.
>>>
>>>
>>> [image: Screenshot 2021-12-03 11.14.58 AM.png]
>>>
>>> On Friday, December 3, 2021 at 3:50:38 AM UTC-4 torc...@gmail.com 
>>> wrote:
>>>
 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

 Il giorno giovedì 2 dicembre 2021 alle 17:06:52 UTC+1 
 cj.v...@gmail.com ha scritto:

> 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 

[tw5] Re: [tw] Using Custom Font in Tiddler Editor

[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

Il giorno venerdì 3 dicembre 2021 alle 17:40:58 UTC+1 cj.v...@gmail.com ha 
scritto:

> 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 ...
>
> On Friday, December 3, 2021 at 12:37:07 PM UTC-4 Charlie Veniot wrote:
>
>> I just checked.  Single quotes should make no difference.
>>
>> On Friday, December 3, 2021 at 12:35:39 PM UTC-4 Charlie Veniot wrote:
>>
>>>  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.
>>>
>>> On Friday, December 3, 2021 at 11:58:38 AM UTC-4 torc...@gmail.com 
>>> wrote:
>>>
 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

 Il giorno venerdì 3 dicembre 2021 alle 16:21:51 UTC+1 cj.v...@gmail.com 
 ha scritto:

> *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.
>
>
> [image: Screenshot 2021-12-03 11.14.58 AM.png]
>
> On Friday, December 3, 2021 at 3:50:38 AM UTC-4 torc...@gmail.com 
> wrote:
>
>> 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
>>
>> Il giorno giovedì 2 dicembre 2021 alle 17:06:52 UTC+1 
>> cj.v...@gmail.com ha scritto:
>>
>>> 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.)
>>>
>>> [image: Screenshot 2021-12-02 12.03.52 PM.png]
>>>
>>> On Thursday, December 2, 2021 at 4:08:39 AM UTC-4 torc...@gmail.com 
>>> wrote:
>>>
 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. 

 Il giorno mercoledì 1 dicembre 2021 alle 18:23:39 UTC+1 
 cj.v...@gmail.com ha scritto:

> 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 

[tw5] Re: [tw] Using Custom Font in Tiddler Editor

[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. 
: (

Il giorno venerdì 3 dicembre 2021 alle 11:02:00 UTC+1 Maurizio Torchio ha 
scritto:

> 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!)
> : ) 
>
> Il giorno venerdì 3 dicembre 2021 alle 08:50:38 UTC+1 Maurizio Torchio ha 
> scritto:
>
>> 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
>>
>> Il giorno giovedì 2 dicembre 2021 alle 17:06:52 UTC+1 cj.v...@gmail.com 
>> ha scritto:
>>
>>> 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.)
>>>
>>> [image: Screenshot 2021-12-02 12.03.52 PM.png]
>>>
>>> On Thursday, December 2, 2021 at 4:08:39 AM UTC-4 torc...@gmail.com 
>>> wrote:
>>>
>>>> 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. 
>>>>
>>>> Il giorno mercoledì 1 dicembre 2021 alle 18:23:39 UTC+1 
>>>> cj.v...@gmail.com ha scritto:
>>>>
>>>>> 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?
>>>>>
>>>>> On Wednesday, December 1, 2021 at 1:15:16 PM UTC-4 jeremy...@gmail.com 
>>>>> wrote:
>>>>>
>>>>>> 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
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> On Wednesday, December 1, 2021 at 5:03:36 PM UTC cj.v...@gmail.com 
>>>>>> wrote:
>>>>>>
>>>>>>> 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.
>>>>>>>

[tw5] Re: [tw] Using Custom Font in Tiddler Editor

[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!)
: ) 

Il giorno venerdì 3 dicembre 2021 alle 08:50:38 UTC+1 Maurizio Torchio ha 
scritto:

> 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
>
> Il giorno giovedì 2 dicembre 2021 alle 17:06:52 UTC+1 cj.v...@gmail.com 
> ha scritto:
>
>> 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.)
>>
>> [image: Screenshot 2021-12-02 12.03.52 PM.png]
>>
>> On Thursday, December 2, 2021 at 4:08:39 AM UTC-4 torc...@gmail.com 
>> wrote:
>>
>>> 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. 
>>>
>>> Il giorno mercoledì 1 dicembre 2021 alle 18:23:39 UTC+1 
>>> cj.v...@gmail.com ha scritto:
>>>
>>>> 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?
>>>>
>>>> On Wednesday, December 1, 2021 at 1:15:16 PM UTC-4 jeremy...@gmail.com 
>>>> wrote:
>>>>
>>>>> 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
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> On Wednesday, December 1, 2021 at 5:03:36 PM UTC cj.v...@gmail.com 
>>>>> wrote:
>>>>>
>>>>>> 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.
>>>>>>
>>>>>> [image: Screenshot 2021-12-01 12.58.38

[tw5] Re: [tw] Using Custom Font in Tiddler Editor

[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

Il giorno giovedì 2 dicembre 2021 alle 17:06:52 UTC+1 cj.v...@gmail.com ha 
scritto:

> 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.)
>
> [image: Screenshot 2021-12-02 12.03.52 PM.png]
>
> On Thursday, December 2, 2021 at 4:08:39 AM UTC-4 torc...@gmail.com wrote:
>
>> 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. 
>>
>> Il giorno mercoledì 1 dicembre 2021 alle 18:23:39 UTC+1 cj.v...@gmail.com 
>> ha scritto:
>>
>>> 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?
>>>
>>> On Wednesday, December 1, 2021 at 1:15:16 PM UTC-4 jeremy...@gmail.com 
>>> wrote:
>>>
 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





 On Wednesday, December 1, 2021 at 5:03:36 PM UTC cj.v...@gmail.com 
 wrote:

> 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.
>
> [image: Screenshot 2021-12-01 12.58.38 PM.png]
>
> On Wednesday, December 1, 2021 at 12:45:03 PM UTC-4 Charlie Veniot 
> wrote:
>
>> 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.
>>
>> On Wednesday, December 1, 2021 at 11:45:47 AM UTC-4 torc...@gmail.com 
>> wrote:
>>
>>> 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 

Re: [tw5] [tw] Using Custom Font in Tiddler Editor

[Maurizio Torchio]

WOW! IT WORKS
I'm... elated.

Il giorno giovedì 2 dicembre 2021 alle 09:10:26 UTC+1 jeremy...@gmail.com 
ha scritto:

> 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
>
>
> Il giorno mercoledì 1 dicembre 2021 alle 18:23:39 UTC+1 cj.v...@gmail.com ha 
> scritto:
>
>> 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?
>>
>> On Wednesday, December 1, 2021 at 1:15:16 PM UTC-4 jeremy...@gmail.com 
>> wrote:
>>
>>> 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
>>>
>>>
>>>
>>>
>>>
>>> On Wednesday, December 1, 2021 at 5:03:36 PM UTC cj.v...@gmail.com 
>>> wrote:
>>>
 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.

 [image: Screenshot 2021-12-01 12.58.38 PM.png]

 On Wednesday, December 1, 2021 at 12:45:03 PM UTC-4 Charlie Veniot 
 wrote:

> 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.
>
> On Wednesday, December 1, 2021 at 11:45:47 AM UTC-4 torc...@gmail.com 
> wrote:
>
>> 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." 
>>
>> Il giorno mercoledì 1 dicembre 2021 alle 14:57:19 UTC+1 
>> cj.v...@gmail.com ha scritto:
>>
>>> 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: 

[tw5] Re: [tw] Using Custom Font in Tiddler Editor

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

Il giorno mercoledì 1 dicembre 2021 alle 18:23:39 UTC+1 cj.v...@gmail.com 
ha scritto:

> 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?
>
> On Wednesday, December 1, 2021 at 1:15:16 PM UTC-4 jeremy...@gmail.com 
> wrote:
>
>> 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
>>
>>
>>
>>
>>
>> On Wednesday, December 1, 2021 at 5:03:36 PM UTC cj.v...@gmail.com wrote:
>>
>>> 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.
>>>
>>> [image: Screenshot 2021-12-01 12.58.38 PM.png]
>>>
>>> On Wednesday, December 1, 2021 at 12:45:03 PM UTC-4 Charlie Veniot wrote:
>>>
 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.

 On Wednesday, December 1, 2021 at 11:45:47 AM UTC-4 torc...@gmail.com 
 wrote:

> 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." 
>
> Il giorno mercoledì 1 dicembre 2021 alle 14:57:19 UTC+1 
> cj.v...@gmail.com ha scritto:
>
>> 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.)*
>>
>> [image: Screenshot 2021-12-01 9.52.23 AM.png]
>>
>> On Wednesday, December 1, 2021 at 6:19:45 AM UTC-4 torc...@gmail.com 
>> wrote:
>>
>>> Hi everybody, any progress on this? (I really don't like see a 
>>> different fontfamily 

[tw5] Re: [tw] Using Custom Font in Tiddler Editor

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

Il giorno mercoledì 1 dicembre 2021 alle 14:57:19 UTC+1 cj.v...@gmail.com 
ha scritto:

> 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.)*
>
> [image: Screenshot 2021-12-01 9.52.23 AM.png]
>
> On Wednesday, December 1, 2021 at 6:19:45 AM UTC-4 torc...@gmail.com 
> wrote:
>
>> 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
>>
>> Il giorno martedì 30 gennaio 2018 alle 21:09:06 UTC+1 Ton Gerner ha 
>> scritto:
>>
>>> 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(<>) format("woff");
>>> }
>>> \end
>>> \rules only filteredtranscludeinline transcludeinline macrodef 
>>> macrocallinline
>>>
>>> /*
>>> ** Fonts
>>> */
>>>
>>> <>> "900">>
>>> <>> "italic" "900">>
>>> <>> >>
>>> <>> "700">>
>>> <>> "100">>
>>> <>> "italic" "100">>
>>> <>> "400">>
>>> <>> "300">>
>>> <>> "italic" "300">>
>>> <>> "400">>
>>>
>>> Hope that helps.
>>>
>>> Cheers,
>>>
>>> Ton
>>>
>>>
>>>

-- 
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/4692a382-91e6-43b9-af01-e4fb9b7754adn%40googlegroups.com.

[tw5] Re: [tw] Using Custom Font in Tiddler Editor

[Maurizio Torchio]

thank you cj.v... , but it does not work for me. 
it adds the class bubba to the textframe (just as 
$:/themes/tiddlywiki/vanilla/settings/editorfontfamily does), and on 
inspecting the element, font-family is correctly assigned but... nothing 
changes.
I think it has to do with what Jeremy said:

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

Il giorno mercoledì 1 dicembre 2021 alle 14:57:19 UTC+1 cj.v...@gmail.com 
ha scritto:

> 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.)*
>
> [image: Screenshot 2021-12-01 9.52.23 AM.png]
>
> On Wednesday, December 1, 2021 at 6:19:45 AM UTC-4 torc...@gmail.com 
> wrote:
>
>> 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
>>
>> Il giorno martedì 30 gennaio 2018 alle 21:09:06 UTC+1 Ton Gerner ha 
>> scritto:
>>
>>> 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(<>) format("woff");
>>> }
>>> \end
>>> \rules only filteredtranscludeinline transcludeinline macrodef 
>>> macrocallinline
>>>
>>> /*
>>> ** Fonts
>>> */
>>>
>>> <>> "900">>
>>> <>> "italic" "900">>
>>> <>> >>
>>> <>> "700">>
>>> <>> "100">>
>>> <>> "italic" "100">>
>>> <>> "400">>
>>> <>> "300">>
>>> <>> "italic" "300">>
>>> <>> "400">>
>>>
>>> Hope that helps.
>>>
>>> Cheers,
>>>
>>> Ton
>>>
>>>
>>>

-- 
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/fd52f29f-17c9-47bc-8127-42e9cf18a8a9n%40googlegroups.com.

[tw5] Re: [tw] Using Custom Font in Tiddler Editor

[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

Il giorno martedì 30 gennaio 2018 alle 21:09:06 UTC+1 Ton Gerner ha scritto:

> 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(<>) format("woff");
> }
> \end
> \rules only filteredtranscludeinline transcludeinline macrodef 
> macrocallinline
>
> /*
> ** Fonts
> */
>
> < >>
> < "900">>
> <>
> < "700">>
> < "100">>
> < "italic" "100">>
> < >>
> < >>
> < "300">>
> < "400">>
>
> Hope that helps.
>
> Cheers,
>
> Ton
>
>
>

-- 
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/6e0fbd90-a27c-433f-a93c-9973e6addf3en%40googlegroups.com.