Google Fonts - again?

254 views
Skip to first unread message

Shay Shaked

unread,
Jun 22, 2018, 6:37:11 AM6/22/18
to tiddl...@googlegroups.com
Hi all, 

I looked through here, and there is indeed a google-font discussion (which is getting a bit old) but doesn't help me much. 

I'm trying to get Google fonts working on a wiki that will be online. 

The code provided (for example:
only works as long as the tiddler it's in is loaded. Kind of makes sense. I figured I can have an ugly workaround and include this line in the Wiki's title, or in every tab in the sidebar, so it's always loaded. As long as I also include the CSS in the CSS sheet, the above work. That is, I need to include the above link in a tiddler that is loaded, AND, need to have the CSS tell the wiki this is my font. I get it, makes sense, a bit annoying with the workaround but whatever. 

Problem is, I noticed I can't change the size of the font in the actual tiddlers. That is, looks like the P property of the CSS is the only thing NOT changed if I change the size in the setting. Further, I would like to define the headlines as a different font maybe, just because what I choose for text is not exactly the greatest when it comes to the title. This probably requires that I define H2 in CSS buffer... but wouldn't the settings built in would over-write this? 

So, here's what I'm looking for:
  1. Have the Google font (or two maybe) loaded somewhere and have them stay loaded. 
  2. Incorporate different size for the text in the tiddlers than the default
  3. Not use an ugly workaround if possible. 
Anyone here done this? 

Jed Carty

unread,
Jun 22, 2018, 6:39:45 AM6/22/18
to TiddlyWiki
For 1 you put your html in a tiddler and tag the tiddler with $:/tags/RawMarkup that adds the contents to the <header> html tag and it will always be available.

I don't know about 2.

Shay Shaked

unread,
Jun 22, 2018, 6:49:17 AM6/22/18
to TiddlyWiki
That would make sense... but that means I have to tag every single tiddler I write. Even if I can automate it, it kind of ruins the idea of tagging (to me, anyway).  

Jed Carty

unread,
Jun 22, 2018, 6:52:05 AM6/22/18
to TiddlyWiki
I don't understand. You should just need to do it once to load the font and then it should be available in the wiki.

Ste Wilson

unread,
Jun 22, 2018, 10:39:59 AM6/22/18
to TiddlyWiki
I has instructions here!
stephenteachertests.tiddlyspot.com/#Font

Shay Shaked

unread,
Jun 23, 2018, 7:08:32 AM6/23/18
to tiddl...@googlegroups.com


On Friday, June 22, 2018 at 6:52:05 AM UTC-4, Jed Carty wrote:
I don't understand. You should just need to do it once to load the font and then it should be available in the wiki.

Jed, this works thanks. 
Looks like I will have to specify size and header in my CSS sheet though: changing the font size in the wiki setting changes the size everywhere besides where I want it - which is the tiddler text itself...

Edit: I'm stupid. the size for the tiddler is specified a few lines below in the settings..... >.>

Ste, thanks for writing this out. Not sure why 
"For reference copy 2. Specify in CSS into another tiddler." 
 
Just any tiddler?as a note? 

Ste Wilson

unread,
Jun 23, 2018, 11:26:00 AM6/23/18
to TiddlyWiki
Just any tiddler then you have a list of the Google fonts you have installed and can copy / paste into the rep event code bits easily. I went a step further and put each font between the @code so it's also a sample of what each front looks like. You can find it in the links after the instructions.

Ste Wilson

unread,
Jun 23, 2018, 11:48:35 AM6/23/18
to TiddlyWiki
Updated instruction to, hopefully, make that clearer.

Shay Shaked

unread,
Jun 23, 2018, 5:07:32 PM6/23/18
to TiddlyWiki
Raw markup doesn't work. If the tiddler is closed, I don't get the fonts anymore. I must be doing something wrong. trying to look. 


JD

unread,
Jun 23, 2018, 10:02:57 PM6/23/18
to tiddl...@googlegroups.com
Hey man, I wonder why $:/tags/RawMarkup doesn't work anymore. I might be wrong but I remember it working for me once. I tried a workaround and used $:/tags/PageTemplate instead.

You can see a demo of that here: http://googlefonts.tiddlyspot.com

Of course, you can use whatever font you want instead of the two here, you can add more or delete any.

Tiddler: 

$:/font

Tag: 

$:/tags/PageTemplate

Text:

<head>

<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Allan" rel="stylesheet">

<style>
body {
    font-family: "Acme";
}
h2 {
    font-family: "Allan";
}
</style>

</head>


EDIT: Formatting. Also, I removed the <head></head> html tags and it still worked, but I'm leaving that here.

Ste Wilson

unread,
Jun 24, 2018, 5:15:49 AM6/24/18
to tiddl...@googlegroups.com
I'm still running on 5.1.16 on my front example.

<link href="https://fonts.googleapis.com/css?family=Permanent+Marker|Zeyada" rel="stylesheet">

And that's the content of my rawmarkup tagged tiddler. (fonts have been deleted from the above for brevity).

JD

unread,
Jun 24, 2018, 6:04:35 AM6/24/18
to TiddlyWiki
yeah, this definitely was how I did it in previous versions, using $:/tags/RawMarkup
Is this maybe a bug in 5.1.17 ?

@TiddlyTweeter

unread,
Jun 24, 2018, 7:51:24 AM6/24/18
to tiddl...@googlegroups.com
It might well be. It sounds likely its a bug.

IF something that worked with the $:/tags/RawMarkup tag in versions prior to 5.1.17 stopped working then most likely it is. The best way to be sure is to clone the same wiki content to 5.1.17 & 5.1.16 and see. If it doesn't work in 5.1.17 then maybe open an issue at: https://github.com/Jermolene/TiddlyWiki5/issues

UPDATE: Or comment here: https://groups.google.com/d/msg/tiddlywiki/bSwzQSrExMg/https://groups.google.com/d/msg/tiddlywiki/bSwzQSrExMg/OcKiFvhyBQAJ

Shay Shaked

unread,
Jun 24, 2018, 2:02:26 PM6/24/18
to TiddlyWiki
OK so after testing and re-testing, I think I understand what the issue is. 

The good news is that $:/tags/RawMarkup works. 

Just create a tiddler, put the code from Google Fonts in it, for example:
In the tiddler tagged with $:/tags/RawMarkup, save it, save your wiki, reload wiki. 

Then you have to specify you want to USE the font. You can do this in CSS in the wiki, or the newer version has this in the wiki settings. Just specify the font face, as you see it in Google fonts. This should work. 

The thing I did, wrongly, is to try to play around with the tiddler I created $:/tags/RawMarkup. I wanted to include a comment to tell myself what I did. As soon as I did that, it broke stuff. So... ok I guess I can't explain in that tiddler, I'll explain in a tiddler leading to it. A bit messy, but no big deal. $ tiddlers are not meant to be self-explanatory anyway, they are code. 

TonyM

unread,
Jun 24, 2018, 8:35:18 PM6/24/18
to TiddlyWiki
Shay,

I believe in documentation, and self documentation myself. I tend to use the description field in a given tiddler to do this as it has less likelyhood of interfering with the tiddler itself.

Regards
Tony

Ton Gerner

unread,
Jun 25, 2018, 4:33:26 AM6/25/18
to TiddlyWiki
Hi Shay,

The thing I did, wrongly, is to try to play around with the tiddler I created $:/tags/RawMarkup. I wanted to include a comment to tell myself what I did. As soon as I did that, it broke stuff. So... ok I guess I can't explain in that tiddler, I'll explain in a tiddler leading to it. A bit messy, but no big deal. $ tiddlers are not meant to be self-explanatory anyway, they are code. 

I think HTML comments

<!--This is a comment. Comments are not displayed in the browser-->

should work.

Cheers,

Ton

JD

unread,
Jun 25, 2018, 6:49:57 AM6/25/18
to TiddlyWiki
Ooh, looks like I missed a certain step in my previous testing process. It is indeed working properly!

Shay Shaked

unread,
Jun 25, 2018, 9:15:26 PM6/25/18
to TiddlyWiki
Ah, good point there. I could do that right. 

Shay Shaked

unread,
Jun 25, 2018, 9:15:54 PM6/25/18
to TiddlyWiki
That's what I did.. and I think that's what messed it up. 

Ton Gerner

unread,
Jun 26, 2018, 3:21:59 PM6/26/18
to TiddlyWiki
Hi Shay,

For me this works:

<!-- To be tagged with $:/tags/RawMarkup -->

Cheers,

Ton

Mohammad

unread,
Jul 12, 2018, 3:25:10 PM7/12/18
to TiddlyWiki
Ton,
 For me also it works! 
Thank you for sharing!

/Mohammad
Reply all
Reply to author
Forward
0 new messages