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 [email protected] 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 [email protected] >>> 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 [email protected] >>>> 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 >>>>> [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/576ecc6f-80f1-4a3c-8a64-b5de05ec8383n%40googlegroups.com.
