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
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?
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.
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
WOW! IT WORKS
I’m… elated.
Hi Maurizio,
That’s great to hear, I’m sorry I didn’t mention that option before.
Best wishes
Jeremy
PS - do send a screenshot of what you’ve ended up with, it might inspire others…
ok, this is a mobile screenshot. we are viewing a tiddler called “esistenza”. (the only content of “esistenza” is macro I use to edit/view/abstract/annotate/reorder all the tiddler tagged with “esistenza”). the tiddler “attraversare-ponte” is now in edit mode (inside “esistenza”). and it displays the same wonderful Baskerville it shows in view mode!
the only problem is that now .tc-editor-toolbar {position: sticky; top: 0;} doesn’t work anymore… I still haven’t guessed why
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.)
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
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!)
: )
nope. I spoke too soon. CodeMirror manage badly text selection on touchscreens. looks like CodeMirror 6 will fix this but until then… it’s of no use for me.
: (
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.
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
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.
I just checked. Single quotes should make no difference.
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 …
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
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.
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)
As a sanity check, try this styling in that core tiddler:
@font-face { font-family: 'CormorantUpright'; src: url(https://cjveniot.neocities.org/CormorantGaramond-SemiBoldItalic.ttf); } .myfont { font-family: 'CormorantUpright'; font-size:2em; color:purple; }I’ve got your TiddlyWiki open, and the stuff above works for me A-1.
If that doesn’t work on your computer, then I think I’ll officially need to give up and stop harassing you with try this/that’s. (But it will continue to really bother me …)
