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 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 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 tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/576ecc6f-80f1-4a3c-8a64-b5de05ec8383n%40googlegroups.com.
