(HowTo) use Google Fonts in your Tiddlers

[Mohamed Amin]

Dears,

I thought that sharing my answer here with this group is a very little thing in return of your support to me (it may help a new user like me).

This is How:

1- Go to "Google Fonts" Gallary in W3Schoole website here 

2- Choose your font and "Copy" its name

3- Add/Customise Font name to your tiddler as in the following example (you can Copy/Past the example to a new Tiddler to check)

<link href='https://fonts.googleapis.com/css?family=Playfair Display' rel='stylesheet'>

<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>

<link href='https://fonts.googleapis.com/css?family=Alex Brush' rel='stylesheet'>

<link href='https://fonts.googleapis.com/css?family=Akronim' rel='stylesheet'>

<link href='https://fonts.googleapis.com/css?family=Annie Use Your Telescope' rel='stylesheet'>

<style>

.st2 {font-family: 'Playfair Display';font-size: 42px;}

.st3 {font-family: 'Sofia';font-size: 42px;}

.st4 {font-family: 'Alex Brush';font-size: 42px;}

.st5 {font-family: 'Akronim';font-size: 42px;}

.st6 {font-family: 'Annie Use Your Telescope';font-size: 42px;}

</style>

<h1 class="st2">'Playfair Display'  1234567890 ABC abc</h1>

<h1 class="st3">'Sofia'  1234567890 ABC abc</h1>

<h1 class="st4">'Alex Brush'  1234567890 ABC abc</h1>

<h1 class="st5">'Akronim'  1234567890 ABC abc</h1>

<h1 class="st6">'Annie Use Your Telescope'1234567890 ABC abc</h1>

Worm Regards

Mohamed Amin

[coda coder]

On Saturday, August 31, 2019 at 8:52:49 AM UTC-5, Mohamed Amin wrote:

<link href='https://fonts.googleapis.com/css?family=Playfair Display' rel='stylesheet'>

<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>

<link href='https://fonts.googleapis.com/css?family=Alex Brush' rel='stylesheet'>

<link href='https://fonts.googleapis.com/css?family=Akronim' rel='stylesheet'>

<link href='https://fonts.googleapis.com/css?family=Annie Use Your Telescope' rel='stylesheet'>

Just pointing out, if you place the link elements in a tiddler and tag it $:/tags/RawMarkup they will be available everywhere.

[PMario]

Hi,

Do you really want to inform google, everytime someone opens your TWs?

I don't!

And I'll block it!

-m

[TonyM]

Folks,

I was going to add for offline support and to avoid what Mario pointed out you can import css files into tiddlywiki and tag them as stylesheets removing the dependance on the internet. I am not so sure how to do It with Mohamed's examples but I expect you can find how. If you visit https://fonts.googleapis.com/css?family=Playfair%20Display you can see the first level of file you can import to a style sheet. Then you can download the woff files and link locally (if not embed them in tiddlywiki as well).

And whilst Mario rightly points out what can be a privacy concern this can be used to your advantage because you could put analytics against your own copy of css to see how far a wiki you distribute propagates. I would also Imagine Mario would insist if you are going to do this it would be a good ethical practice to inform the users of your wiki of this and allow them to "defeat" it if they wish.

Regards

Tony

[PMario]

On Sunday, September 1, 2019 at 3:00:41 AM UTC+2, TonyM wrote:

...

I was going to add for offline support and to avoid what Mario pointed out you can import css files into tiddlywiki and tag them as stylesheets removing the dependance on the internet.

If you want to use the font for your local wikis, just install them on your system, if you really like them. So it doesn't bloat your wiki.

TW Control Panel allows you to define default font settings. ... If you use a fitting "fallback" font it would be easy to publish them. ... They wouldn't look exactly the same but at least it would be useful content.

If the font, that you use is the only thing, why your users would visit the site. ... You have a different problem anyway.

And whilst Mario rightly points out what can be a privacy concern this can be used to your advantage because you could put analytics against your own copy of css to see how far a wiki you distribute propagates.

I'm OK with that, since you have to host the font and pay for the bandwidth. Who pays the bills, makes the rules ;)

 

I would also Imagine Mario would insist if you are going to do this it would be a good ethical practice to inform the users of your wiki of this and allow them to "defeat" it if they wish.

The GDPR enforces "consent". So it's opt-in and not opt-out. I'm OK with that and I'll try to block, if it is different.

have fun!

mario