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/9a55aea6-f005-4d27-ad88-5048345f18e5n%40googlegroups.com.
