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 [email protected] 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 [email protected] 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 [email protected]
>> 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 [email protected]
>>> 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 [email protected]
>>>> 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 [email protected]
>>>>>> 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
>>>>>>> [email protected] 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
>>>>>>>> [email protected] 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 <https://tiddlywiki.com/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
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
--
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/feb1ac40-3b37-4d8d-8cd3-6e9981b280den%40googlegroups.com.
